當原圖片載入失敗時，如何讓圖片載入上我們預設給的圖片
我們可能會遇到這樣的問題，當頁面中的圖片的載入失敗時，我們想要該圖片載入我們給的預設的圖片，我在這裡分享一下幾種做法，希望對大家有所幫助。
1、在img標籤中加上 onerror="this.src='error.png ' ";
<img src="Images/1.png " onerror="this.src='error.png ' " >
2、不想在每個img中都定義onerror事件的話，就使用jquery試試
JavaScript code
$(window).load(function() {
$('img').each(function() {
if (!this.complete || typeof this.naturalWidth == "undefined" || this.naturalWidth == 0) {
this.src = './image/logo.gif';
}
});
});
3、但是都要考慮，過載的圖片仍然錯誤，就會陷入死迴圈
下面給出一個帶重試次數，並且延遲載入的實現，超過重試次數仍不能正常顯示的，顯示預設圖片
<html>
<head>
<title>顯示預設圖片</title>
<scripttype="text/javascript">
functionshowImgDelay(imgObj,imgSrc,maxErrorNum){
showSpan.innerHTML += "--" +maxErrorNum; //顯示出載入圖片出錯的次數
if(maxErrorNum>0){
imgObj.onerror=function
showImgDelay(imgObj,imgSrc,maxErrorNum-1);
};
setTimeout(function(){
imgObj.src=imgSrc;
},500);
}else{
imgObj.onerror=null;
imgObj.src="images/default.jpg";
}
}
</script>
</head>
<body>
<img
<spanid="showSpan"></span>
</body>
</html>