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