如何爲頁面上的所有圖像設置錯誤圖像？

我想顯示自己的錯誤圖像，當圖像不能成功加載。如何爲頁面上的所有圖像設置錯誤圖像？

我想到了一個JavaScript函數：

<script type="text/javascript"> 
var images = document.getElementsByTagName("img"); 
for (var i = 0; i < images.length; i++) { 
    images[i].onerror = onErrorImage(images[i]); 
}  
function onErrorImage(element){ 
    element.onerror = null; 
    element.src = 'errorImage.png'; 
} 
</script>

但是，這是行不通的。這會將頁面上的每個圖像轉換爲我自己的錯誤圖像。

有沒有另一個簡單的方法來顯示我自己的錯誤圖像的錯誤？

或者有另一種方法來綁定一個函數，像我在第4行那樣的事件嗎？因爲我非常確定該腳本在該行上失敗。

解決方案可能在jQuery中。

來源

2014-04-30 Liontack Lightning

你不應該等待DOM準備好嗎？ – mehulmpt

[jQuery/Javascript替換破碎的圖像]的可能重複（http://stackoverflow.com/questions/92720/jquery-javascript-to-replace-broken-images） –

@JayBlanchard，這個問題已經在每個img中html一個錯誤。我想避免這種情況。 –

它應該是我猜：

images[i].onerror = function(){onErrorImage(this);}

來源

2014-04-30 13:05:16

這解決了它，令人驚訝的是，感謝A.沃爾夫。 –

有很多方法可以做到這一點，我會告訴你是其中之一：

你可以讓你的所有圖片與"fake-src"和負載他們在文件準備好時。當然你可以製作一個裝載機，直到他們下載。這裏是我爲你寫的一個函數：

imagesReady = function() { 
    var myImgs = document.getElementsByTagName("img"); 
    for (var i = 0; i < myImgs.length; i++) { 
     getImageReady(myImgs[i]); 
    }; 
    function getImageReady(el) { 
     var url = el.getAttribute("src-fake"); 
     var image = document.createElement("img"); 
     image.onload = function() { 
      el.src = url; 
      el.style.opacity = 1; 
      //this image is ok, that why we put his src to be the fake src 
     }; 
     image.onerror = function (err) { 
      console.log("err on load :"+image.src); 
      el.src = url; 
      //this image fail! 
     } 
     image.src = url; 
    } 
} 
imagesReady();

來源

2014-04-30 13:22:11 Tsoko

如何爲頁面上的所有圖像設置錯誤圖像？

回答

相關問題