|
|
|
|
|
|
贊助商
分類目錄
贊助商
最新文章
搜索
兩種方法圖片加載失敗時(shí)顯示默認(rèn)圖片【親測(cè)無(wú)閃圖】
作者:admin 時(shí)間:2022-3-31 10:34:0 瀏覽:網(wǎng)站中的圖像加載失敗的原因有很多，可能是src圖像包含斷開(kāi)的鏈接，或者，互聯(lián)網(wǎng)連接可能很差，不足以從外部來(lái)源獲取圖像，或者，圖像的服務(wù)器（可能是外部的）可能已關(guān)閉。
當(dāng)圖像未加載時(shí)，alt文本將顯示在容器中，并帶有一個(gè)小圖標(biāo)，表示圖像損壞，如下所示：
此視圖會(huì)影響用戶體驗(yàn)，尤其是當(dāng)文本開(kāi)始超出圖像容器時(shí)，甚至一些圖像src沒(méi)有設(shè)置alt的，連替代文本都沒(méi)有顯示，只有一個(gè)破裂的小圖標(biāo)。
當(dāng)由于某種原因未正確獲取圖像時(shí)，我們可以顯示默認(rèn)圖像（而不是替代文本），這便是本文將要介紹的內(nèi)容。
使用onerror
根據(jù)MDN
當(dāng)資源加載失敗或無(wú)法使用時(shí)，將在 Element 對(duì)象上觸發(fā)錯(cuò)誤事件。例如，如果腳本執(zhí)行錯(cuò)誤或圖像無(wú)法找到或無(wú)效。
當(dāng)圖像由于鏈接斷開(kāi)或任何原因而無(wú)法加載時(shí)，onerror將觸發(fā)該事件。這是我們?cè)O(shè)置默認(rèn)圖像的地方。
設(shè)置默認(rèn)圖像
這里的想法是，我們聲明一個(gè)回調(diào)函數(shù)，這樣當(dāng)觸發(fā)錯(cuò)誤事件時(shí)，event將調(diào)用以對(duì)象為參數(shù)的函數(shù)。在該回調(diào)函數(shù)中，我們可以將圖像src的鏈接更改為我們確定沒(méi)有損壞的默認(rèn)鏈接，并且可能存在于同一臺(tái)服務(wù)器上。
易犯錯(cuò)誤
網(wǎng)上看到不少方法，但經(jīng)過(guò)本人親自測(cè)試后，發(fā)現(xiàn)大部分都存在無(wú)限循環(huán)（閃圖）的問(wèn)題，如下圖這樣：
當(dāng)原圖鏈接和默認(rèn)圖片鏈接都失效時(shí)，這個(gè)無(wú)限循環(huán)（閃圖）的問(wèn)題就產(chǎn)生了。
我們應(yīng)該避免這個(gè)問(wèn)題的產(chǎn)生，為此，我親測(cè)了很多代碼，發(fā)現(xiàn)還是有解決的辦法。
現(xiàn)在，讓我們看看代碼。
HTML 和 JS
下面代碼是使用Javascript來(lái)實(shí)現(xiàn)：
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body>
<img id="image1" src="圖片鏈接" onerror="getDefaultImage()" alt="卡卡測(cè)速網(wǎng) www.howtostagehomes.com"/>
<script>
function getDefaultImage(){
var img=event.srcElement;
img.src="默認(rèn)圖片鏈接";
img.onerror=null;
}
</script>
</body>
</html>
親測(cè)結(jié)果，這種寫法當(dāng)原圖鏈接和默認(rèn)圖片鏈接都失效后，不會(huì)出現(xiàn)無(wú)限循環(huán)（閃圖）的問(wèn)題，而是顯示替代文本（圖片 src alt 的文字）。
關(guān)鍵要做的一件事是添加img.onerror = null。該行的相關(guān)性是，如果由于任何原因新分配的圖像鏈接斷開(kāi)或未獲取圖像，onerror則將再次觸發(fā)事件。如果圖像沒(méi)有再次加載，又再觸發(fā)另一個(gè)觸發(fā)器。這就產(chǎn)生一個(gè)無(wú)限的循環(huán)。
分配null給事件可以防止這種情況。如果新的圖片鏈接失效，錯(cuò)誤事件不會(huì)調(diào)用回調(diào)函數(shù)，然后alt會(huì)顯示文字。
HTML 和 jQuery
下面代碼是使用jQuery來(lái)實(shí)現(xiàn)：
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
</head>
<body>
<img id="image1" src="圖片鏈接" alt="卡卡測(cè)速網(wǎng) www.howtostagehomes.com"/>
<script>
$("#image1").one("error", function(){
$(this).attr("src", "默認(rèn)圖片鏈接");
});
</script>
</body>
</html>
親測(cè)結(jié)果，完美！這種寫法同樣是，當(dāng)原圖鏈接和默認(rèn)圖片鏈接都失效后，不會(huì)出現(xiàn)無(wú)限循環(huán)（閃圖）的問(wèn)題，而是顯示替代文本（圖片 src alt 的文字）。
使用jQuery來(lái)實(shí)現(xiàn)，代碼比較簡(jiǎn)單，不過(guò)你要先引用jQuery庫(kù)文件。
注意，這里使用的是 jQuery one() 方法，one() 方法為被選元素添加一個(gè)或多個(gè)事件處理程序，并規(guī)定當(dāng)事件發(fā)生時(shí)運(yùn)行的函數(shù)。當(dāng)使用 one() 方法時(shí)，每個(gè)元素只能運(yùn)行一次事件處理程序函數(shù)。
并非所有onerror = null都有效
網(wǎng)上看到一個(gè)例子，他使用的JS代碼是這個(gè)：
const img = document.getElementById("image")
img.addEventListener("error", function(event) {
event.target.src = "默認(rèn)圖片鏈接"
event.onerror = null
})雖然也使用了 onerror = null ，但是當(dāng)原圖鏈接和默認(rèn)圖片鏈接都失效時(shí)，仍然會(huì)進(jìn)入無(wú)限循環(huán)模式。究其原因，是監(jiān)聽(tīng)事件addEventListener()一直在進(jìn)行，沒(méi)有停止，event.onerror = null 在這里無(wú)效。
總結(jié)
這就是當(dāng)圖像無(wú)法加載時(shí)如何設(shè)置默認(rèn)圖像的方法，主要是使用了onerror的觸發(fā)事件來(lái)實(shí)現(xiàn)，但要注意避免無(wú)限循環(huán)的問(wèn)題。
標(biāo)簽: 圖片加載
- 站長(zhǎng)推薦
