IMG標簽的onerror事件IMG的onerror妙用
發(fā)表于 2010/02/17 20:28 ,
代碼如詩 ,
評論(0) ,
閱讀(154) ,
大 | 中 | 小 IMG的onerror自動選擇最快線路，根據(jù)服務(wù)器返回 錯誤
思路：
我們在www.lrjz.net 中讓客戶端同時向地址www.o121.cn和o121.cn發(fā)出一個錯誤的請求，哪一個地址返回錯誤的響應(yīng)速度快就說明用戶應(yīng)該訪問那個地址。
關(guān)鍵代碼：
<img src="http://www.o121.cn" width="1" height="1"
onerror="location.top.url='http://www.o121.cn/'"/>
<img src="http://o121.cn" width="1" height="1"
onerror="location.top.url='http://o121.cn/'"/>
為了在用戶下次訪問的時候可以直接跳轉(zhuǎn)到比較快的線路上我們可以將這一次判斷的結(jié)果保存到cookie中。
IMG的onerror事件的另一個用武之地：
我們都不希望用戶看到我們網(wǎng)站上面出現(xiàn)無效的圖片，即便是出現(xiàn)了無效的圖片我們也希望以一種友好的方式告訴用戶圖片無效，而不是直接給用戶看默認的紅叉；怎么辦，我們可以在圖片的onerror事件中將圖片的src屬性設(shè)置為我們網(wǎng)站上已存在的表示圖片不存在的圖片。
這段代碼本身是要顯示logo1.gif，但該圖片不存在時將觸發(fā)onerror事件，顯示后面指定的logo.gif 。
代碼示例：
<img src="http://www.o121.cn/logo1.gif" onerror="this.src='http://www.o121.cn/logo.gif'"/>
在HTML中寫了以下代碼
<img src="xxx.jpg" onerror="this.src='xxx.jpg'" />
在FF上面還可以 但是在IE上面就不的，因為B/S結(jié)構(gòu)有很多因素引發(fā)onerror，此處在發(fā)生onerror的時候給當(dāng)前圖片重新制定個地址
可是這會引起再因網(wǎng)絡(luò)原因或其他原因使圖片不能正常加載的話 這樣就是再次調(diào)用onerror，基于微軟的一套核心的瀏覽器就會認為這是死循環(huán)
然后就會報 stack overflow 的錯誤。
解決方案:
使用兩個
<img />
代碼如下:
<style type="text/css">
.hidden {
display: none;
}
</style>
<img src="xxx.jpg" onerror="this.class='hidden';xx.class=''" />
<img src="xxx.jpg" class="hidden" />
