有時候，當img的src加載失敗，會顯示缺省碎片圖片， 影響用戶體驗。 有一個js事件onerror就派上了用場。它可以在加載失敗時，顯示缺省的圖片。

它有兩種使用方式。

第一種：使用純標簽寫法。這樣會增大網頁的體積。 但是客戶端解析速度要快點。

<img src="https://www.88tv.org/upload/vod/20190829-1/db8b269c40172799f215aba93f03a03d.jpg" onerror="javascript:this.src='https://t.8kmm.com/upload/vod/20190829-1/db8b269c40172799f215aba93f03a03d.jpg';">

第二種：使用Jquery JS，全站如果有規律，可以使用此種方式。 在所需頁面插入下面這段js就行了。

<script>
$(document).ready(function(){  
    $('.stui-vodlist img').each(function(){   //我這里僅僅是遍歷vodlist這個元素下面的內容。 
        var error = false;
        if (!this.complete) {
            error = true;
        }

        if (typeof this.naturalWidth != "undefined" && this.naturalWidth == 0) {
            error = true;
        }

        if(error){
            $(this).bind('error.replaceSrc',function(){
                this.src = this.src.replace("www.88tv.org","t.8kmm.com");  //注意這一句，  因為這里是有規律的， 所有我可以這樣寫，如果有不同， 這里需要定制。 

                $(this).unbind('error.replaceSrc');
            }).trigger('load');
        }
    });
});
</script>

結尾：

如果碰到onerror過去的圖片也沒有，可能會造成循環請求，這樣的話，就需要對這段升級。

可以使用,去檢查圖片是否存在，

var imgUrl = "https://t.8kmm.com/upload/vod/20191006-16/d9823993b55e8cb504cf174c7bd9db12.jpg";
        var img = new Image();
        img.src=imgUrl;
        //判斷圖片大小是否大于0 或者 圖片高度與寬度都大于0
        if(img.filesize>0||(img.width>0&&img.height>0)){
            e.src = imgUrl;
        }else{
            //默認圖片也不存在的時候
            e.src="/img/default.jpg";
        }

當然，也可以使用XMLHTTP遠程判斷圖片是否存在。再根據遠程獲取的是404還是200來更換圖片SRC。

總結

以上是生活随笔為你收集整理的img error 图片加载失败的最佳方案的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。