今天了解到一個新的知識點,之前沒用過,所以記錄一下

當img圖片加載失敗的時候會顯示一個帶xx的圖片,影響頁面美觀,怎么辦?

onerror屬性

當圖片加載錯誤的時候,觸發(fā)onerror事件:
例如:
1、讓這個圖片元素隱藏：

<img src="banner_1." height="224" width="618" onerror="this.style.display = 'none'">

2、用默認的圖片替換：

<img src="banner_1." height="224" width="618" onerror="this.src='banner_1.png'">

注意：

如果使用不當，在IE內(nèi)核的瀏覽器下會造成死循環(huán)。比如：當【默認圖片的url地址】也加載不成功（比如網(wǎng)速比較慢的時候）或不存在的話，就會反復(fù)的加載，最后造成堆棧溢出錯誤。

因此， 需要用下面兩種方法解決：
a、更改 onerror 代碼為其它處理方式或者確保 onerror 中的默認圖片足夠小，并且存在。
b、控制onerror事件只觸發(fā)一次，需要增加這句話：this.onerror=null; 增加后如下：

<img src="banner_1." height="224" width="618" onerror="this.src='banner_1.png';this.onerror='null'">