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、用預設的圖片取代：

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各個版本及谷歌、火狐瀏覽器中都支援。

以上就是JavaScript透過使用onerror設定預設影像顯示取代alt_javascript技巧的內容，更多相關內容請關注PHP中文網（www.php.cn）！