這篇文章主要介紹了JavaScript通過使用onerror設(shè)置默認(rèn)圖像顯示代替alt的相關(guān)資料,需要的朋友可以參考下

JavaScript代碼

　//圖像加載出錯(cuò)時(shí)的處理

function errorImg(img) {

img.src = "默認(rèn)圖片.jpg";

img.onerror = null;

}

html代碼

<img width="32" height="32" src="1.jpg" onerror="errorImg(this)" />

為了美觀當(dāng)網(wǎng)頁圖片不存在時(shí)不顯示叉叉圖片

當(dāng)在頁面顯示的時(shí)候，萬一圖片被移動(dòng)了位置或者丟失的話，將會(huì)在頁面顯示一個(gè)帶X的圖片，很是影響用戶的體驗(yàn)。即使使用alt屬性給出了”圖片XX”的提示信息，也起不了多大作用。

其實(shí)，可以這樣處理：當(dāng)圖片不存在的時(shí)候，會(huì)觸發(fā)onerror事件，我們可以在該事件中做一下補(bǔ)救的工作，比如：

1、讓這個(gè)圖片元素隱藏：

為了美觀當(dāng)網(wǎng)頁圖片不存在時(shí)不顯示叉叉圖片 src="圖片的url地址" alt="圖片XX" onerror="this.style.display='none'"/>

2、用默認(rèn)的圖片替換：

為了美觀當(dāng)網(wǎng)頁圖片不存在時(shí)不顯示叉叉圖片 src="圖片的url地址" alt="圖片XX" onerror="this.src='默認(rèn)圖片的url地址'"/>

注意：如果使用不當(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; 增加后如下：

為了美觀當(dāng)網(wǎng)頁圖片不存在時(shí)不顯示叉叉圖片 src="圖片的url地址" alt="圖片XX" onerror="this.src='默認(rèn)圖片的url地址;this.onerror=null'"/>

經(jīng)測(cè)試，上面的方法在IE各個(gè)版本及谷歌、火狐瀏覽器中都支持。