DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> JavaScript通過使用onerror設置默認圖像顯示代替alt
JavaScript通過使用onerror設置默認圖像顯示代替alt
編輯:關於JavaScript     

JavaScript代碼

 //圖像加載出錯時的處理
function errorImg(img) {
img.src = "默認圖片.jpg";
img.onerror = null;
}

html代碼

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

為了美觀當網頁圖片不存在時不顯示叉叉圖片

當在頁面顯示的時候,萬一圖片被移動了位置或者丟失的話,將會在頁面顯示一個帶X的圖片,很是影響用戶的體驗。即使使用alt屬性給出了”圖片XX”的提示信息,也起不了多大作用。
其實,可以這樣處理:當圖片不存在的時候,會觸發onerror事件,我們可以在該事件中做一下補救的工作,比如:

1、讓這個圖片元素隱藏:

為了美觀當網頁圖片不存在時不顯示叉叉圖片 src="圖片的url地址" alt="圖片XX" onerror="this.style.display='none'"/>

2、用默認的圖片替換:

為了美觀當網頁圖片不存在時不顯示叉叉圖片 src="圖片的url地址" alt="圖片XX" onerror="this.src='默認圖片的url地址'"/>

注意:如果使用不當,在IE內核的浏覽器下會造成死循環。比如:當【默認圖片的url地址】也加載不成功(比如網速比較慢的時候)或不存在的話,就會反復的加載,最後造成堆棧溢出錯誤。

因此, 需要用下面兩種方法解決:

a、更改 onerror 代碼為其它處理方式或者確保 onerror 中的默認圖片足夠小,並且存在。

b、控制onerror事件只觸發一次,需要增加這句話:this.onerror=null; 增加後如下:

為了美觀當網頁圖片不存在時不顯示叉叉圖片 src="圖片的url地址" alt="圖片XX" onerror="this.src='默認圖片的url地址;this.onerror=null'"/>

經測試,上面的方法在IE各個版本及谷歌、火狐浏覽器中都支持。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved