【JavaScript】載入失敗的紅叉圖片處理與<img>圖片標籤的onerror事件

標籤：圖片   onerror   圖片處理   javascript   事件   

大家上網的時候肯定見到過載入失敗的紅叉圖片，具體如。當然現在Google Chrome與Firefox對其處理會好看一些。

其實可以利用<img>圖片標籤的onerror事件對其處理的，要求其載入失敗之後，馬上載入一張預設圖片，而不是顯示為紅叉叉。

其代碼如下：

<img src="s.png" onerror="javascript:this.src='xx.png';this.width=80;this.height=80;" />

意為，如果載入s.png這張圖片失敗了，就馬上去載入xx.png這張圖片，同時xx.png這張圖片要求其以80x80的方式載入。

當然，如果你要設定更多屬性，完全可以寫成這樣：

<img src="s.png" onerror="onErrorHandle(this)" />

聲明這個s.png載入失敗的javascript處理函數是onErrorHandle，然後把自己，也就是這個img節點傳過去，

然後在javascript中寫一個這樣的onErrorHandle函數：

function onErrorHandle(obj){obj.src="xx.png";obj.width=80;obj.height=80;}

這樣的話，你可以設定在這個onErrorHandle函數設定更多的屬性，用obj.xx屬性就可以了。同時避免了在onerror=""這個事件的雙引號寫了太多單引號，把自己弄暈的困窘。

【JavaScript】載入失敗的紅叉圖片處理與<img>圖片標籤的onerror事件