今天了解到一個(gè)新的知識(shí)點(diǎn),之前沒(méi)用過(guò),所以記錄一下
當(dāng)img圖片加載失敗的時(shí)候會(huì)顯示一個(gè)帶xx的圖片,影響頁(yè)面美觀,怎么辦?
onerror屬性
當(dāng)圖片加載錯(cuò)誤的時(shí)候,觸發(fā)onerror事件:
例如:
1、讓這個(gè)圖片元素隱藏：
<img src="banner_1." height="224" width="618" onerror="this.style.display = 'none'">
2、用默認(rèn)的圖片替換：
<img src="banner_1." height="224" width="618" onerror="this.src='banner_1.png'">
注意：
如果使用不當(dāng)，在IE內(nèi)核的瀏覽器下會(huì)造成死循環(huán)。比如：當(dāng)【默認(rèn)圖片的url地址】也加載不成功（比如網(wǎng)速比較慢的時(shí)候）或不存在的話，就會(huì)反復(fù)的加載，最后造成堆棧溢出錯(cuò)誤。
因此， 需要用下面兩種方法解決：
a、更改 onerror 代碼為其它處理方式或者確保 onerror 中的默認(rèn)圖片足夠小，并且存在。
b、控制onerror事件只觸發(fā)一次，需要增加這句話：this.onerror=null; 增加后如下：
<img src="banner_1." height="224" width="618" onerror="this.src='banner_1.png';this.onerror='null'">
