HTML img標籤之onAbort、onError、onLoad事件與問題

img標籤在使用的時候 一下幾個事件非常的有用：

onError：當圖片載入出現錯誤，會觸發 經常在這裡事件裡頭寫入 將圖片導向預設報錯圖片，以免頁面上出現紅色的叉叉

onLoad：事件是當圖片載入完成之後觸發

onAbort：圖片載入的時候，使用者通過點選停止載入（瀏覽器上的紅色叉叉）時出發，通常在這裡觸發一個提示：“圖片正在載入”



很好的利用這3個事件可以在HTML中實現很多圖片的功能

例如：處理圖片載入失敗情況：<img src="image/1.jpg" width="258" height="178" οnerrοr="this.src='images/isets.jpg'" />

IMG的onerror自動選擇最快線路，根據伺服器返回 錯誤：
<img src="http://dianxin.xxx.com/NotExistsUrl" width="1" height="1"
οnerrοr="location.top.url='http://dianxin.xxx.com/'"/>
<img src="http://wangtong.xxx.com/NotExistsUrl" width="1" height="1"
οnerrοr="location.top.url='http://wangtong.xxx.com/'"/>

例如，你可能會利用這個onAbort訊息來警告使用者，提醒他們停止某個重要影像的載入，例如影像對映：
<img src="pics/camnpr.gif" usemap="#map1" onAbort="window.alert('注意:這張照片含有重要的連結,請重新載入.')">

同時有另一個問題出現：如果οnerrοr="this.src='圖片'"，這個"圖片"也不存在時，就會出現下邊的錯誤：
img圖片沒找到onerror事件 Stack overflow at line: 0


開啟網頁時提示 Stack overflow at line: 0。我做了截圖如下：
[img]http://www.camnpr.com/articles/common/upload/2010/10/13/162131ef.png[/img]

經過分析，發現網頁中存在類似如下的程式碼：

<img src="pic.gif" οnerrοr="javascript:this.src='/noPic.gif';" alt="pic" />
分析：特別注意 onerror，當圖片不存在時，將觸發 onerror，而 onerror 中又為 img 指定一個 NoPic.gif 圖片。也就是說圖片存在則顯示 pic.gif，圖片不存在將顯示

noPic.gif。但問題來了，如果 noPic.gif 也不存在，則繼續觸發 onerror，導致迴圈，故出現錯誤。

說明：如果圖片存在，但網路很不通暢，也可能觸發 onerror。

解決方法：第一種：：.去掉 onerror 程式碼；或者更改 onerror 程式碼為其它；或者確保 onerror 中的圖片足夠小，並且存在。

第二種：

<script type="text/javascript">
<!--
function nofind(){
var img=event.srcElement;
img.src="../icon/default.gif";

img.οnerrοr=null; 控制不要一直跳動

}
//沒有找到時 用事件獲取 一個一個獲取
//-->
</script>

<td align="center"><img src="../icon/${file.suffix }.gif" οnerrοr="nofind();" />${file.name }</td>

第三種:
使用兩個<img />

<style type="text/css">
.hidden {
display: none;
}
</style>
<img src="camnpr.jpg" οnerrοr="this.class='hidden';xx.class=''" />
<img src="camnpr.jpg" class="hidden" />