img標簽的onerror事件

#情景分析：

　　有時，img標簽中的src圖片加載失敗，原來的圖片位置會出現一個碎片圖標，這樣讓人很不爽，如何變得美觀些呢？

#解決方案：

　　可以借用img標簽的onerror事件，img標簽支持onerror 事件，在裝載文檔或圖像的過程中如果發生了錯誤，就會觸發onerror事件。可以使用一張提示錯誤的圖片代替顯示不了的圖片。代碼如下：　

 

<img src="images/logo.png" onerror="javascript:this.src='images/logoError.png';">

 

　　當圖片images/logo.png不存在時，將觸發 onerror事件，而 onerror 中又為該 img 指定了images/logoError.png圖片。也就是說圖片images/logo.png存在則顯示logo.png，圖片images/logo.png不存在將顯示 logoError.png。

　　*問題：如果images/logoError.png 也不存在，則會繼續觸發 onerror事件，導致死循環，故會出現打開網頁時提示 Stack overflow at line: 0 錯誤。特別說明：如果圖片存在，但網絡很不通暢，也可能觸發 onerror事件。

　　*解決方法：控制它不循環，代碼如下：

 

<script type="text/javascript"> 
    function imgerrorfun(){ 
        var img=event.srcElement; 
        img.src="images/logoError.png"; 
        img.onerror=null; 控制不要一直跳動 
    } 
</script> 

<img src="images/logo.png" onerror="imgerrorfun();" />

 

 

 

 

 

***————————————————————————————————————————***