img圖片地址加載失敗，顯示默認圖片，使用onerror事件注意的事項和方法

1.在使用img標簽時，因為圖片地址不存在或者網絡加載過慢后請求圖片失敗，會出現一個碎片圖標，這就讓用戶非常不爽，這時我就需要改變這個美觀度使用onerror事件去改變加載圖片失敗顯示內容

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

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

3.當圖片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事件。

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

<img src="images/logo.png" οnerrοr="imgerrorfun();" />


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

*解決方法2:

使用js的Image對象獲取這個圖片的信息,判斷一些屬性是否正常,如果正常就使用這個圖片作為默認圖片,不正常則不顯示

<img src="a.jpg" onerror="imgExists(this)" alt="">
<script>
    function imgExists(e){
        //默認圖片
        var imgUrl = "https://account.acgxt.com/public/images/default.png";
        var img = new Image();
        img.src=imgUrl;
        //判斷圖片大小是否大於0 或者 圖片高度與寬度都大於0
        if(img.filesize>0||(img.width>0&&img.height>0)){
            e.src = imgUrl;
        }else{
            //默認圖片也不存在的時候
        }
    }
</script>
//也可以使用XMLHTTP遠程判斷圖片是否存在。然后根據遠程獲取的是404還是200來更換圖片

 

我是馬丁的車夫，歡迎轉發收藏！