js注意img圖片的onerror事件的分析
更新時(shí)間：2011年01月01日 18:23:04 作者：
打開(kāi)網(wǎng)頁(yè)時(shí)提示 Stack overflow at line: 0。img圖片的onerror事件需要注意的細(xì)節(jié)。
經(jīng)過(guò)分析，發(fā)現(xiàn)網(wǎng)頁(yè)中存在類(lèi)似如下的代碼：
<img src="pic.gif" onerror="javascript:this.src='/noPic.gif';" alt="pic" />
分析：特別注意 onerror，當(dāng)圖片不存在時(shí)，將觸發(fā) onerror，而 onerror 中又為 img 指定一個(gè) NoPic.gif 圖片。也就是說(shuō)圖片存在則顯示 pic.gif，圖片不存在將顯示 noPic.gif。但問(wèn)題來(lái)了，如果 noPic.gif 也不存在，則繼續(xù)觸發(fā) onerror，導(dǎo)致循環(huán)，故出現(xiàn)錯(cuò)誤。
說(shuō)明：如果圖片存在，但網(wǎng)絡(luò)很不通暢，也可能觸發(fā) onerror。
解決方法：
第一種：：.去掉 onerror 代碼；或者更改 onerror 代碼為其它；或者確保 onerror 中的圖片足夠小，并且存在。
第二種：
<script type="text/javascript">
<!–
function nofind(){
var img=event.srcElement;
img.src="../../../sys/common/image/fileoperation/icon/default.gif";
img.onerror=null; 控制不要一直跳動(dòng)
}
//–>
</script>
<td align="center"><img src="../../../sys/common/image/fileoperation/icon/${file.suffix }.gif" onerror="nofind();" />${file.name }</td>
<img src="pic.gif" onerror="javascript:this.src='/noPic.gif';" alt="pic" />
分析：特別注意 onerror，當(dāng)圖片不存在時(shí)，將觸發(fā) onerror，而 onerror 中又為 img 指定一個(gè) NoPic.gif 圖片。也就是說(shuō)圖片存在則顯示 pic.gif，圖片不存在將顯示 noPic.gif。但問(wèn)題來(lái)了，如果 noPic.gif 也不存在，則繼續(xù)觸發(fā) onerror，導(dǎo)致循環(huán)，故出現(xiàn)錯(cuò)誤。
說(shuō)明：如果圖片存在，但網(wǎng)絡(luò)很不通暢，也可能觸發(fā) onerror。
解決方法：
第一種：：.去掉 onerror 代碼；或者更改 onerror 代碼為其它；或者確保 onerror 中的圖片足夠小，并且存在。
第二種：
復(fù)制代碼 代碼如下:
<script type="text/javascript">
<!–
function nofind(){
var img=event.srcElement;
img.src="../../../sys/common/image/fileoperation/icon/default.gif";
img.onerror=null; 控制不要一直跳動(dòng)
}
//–>
</script>
<td align="center"><img src="../../../sys/common/image/fileoperation/icon/${file.suffix }.gif" onerror="nofind();" />${file.name }</td>
您可能感興趣的文章:
- JavaScript探測(cè)CSS動(dòng)畫(huà)是否已經(jīng)完成的方法
- javascript字典探測(cè)用戶(hù)名工具
- 用javascript實(shí)現(xiàn)給圖片加鏈接
- js實(shí)現(xiàn)點(diǎn)擊鏈接后延遲3秒再跳轉(zhuǎn)的方法
- JS實(shí)現(xiàn)點(diǎn)擊鏈接取消跳轉(zhuǎn)效果的方法
- JS獲得URL超鏈接的參數(shù)值實(shí)例代碼
- JS對(duì)img標(biāo)簽進(jìn)行優(yōu)化使用onerror顯示默認(rèn)圖像
- JS使用onerror捕獲異常示例
- JavaScript通過(guò)使用onerror設(shè)置默認(rèn)圖像顯示代替alt
- 用window.onerror捕獲并上報(bào)Js錯(cuò)誤的方法
- JavaScript中的onerror事件概述及使用
- javascript window.onerror事件學(xué)習(xí)新收獲
- JS實(shí)現(xiàn)探測(cè)網(wǎng)站鏈接的方法【測(cè)試可用】
相關(guān)文章
JavaScript調(diào)用客戶(hù)端Java程序的方法
這篇文章主要介紹了JavaScript調(diào)用客戶(hù)端Java程序的方法,實(shí)例分析了javascript調(diào)用java程序的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-07-07
wordpress之js庫(kù)集合研究介紹...2007-08-08
JS+HTML實(shí)現(xiàn)的圓形可點(diǎn)擊區(qū)域示例【3種方法】
這篇文章主要介紹了JS+HTML實(shí)現(xiàn)的圓形可點(diǎn)擊區(qū)域,結(jié)合實(shí)例形式分析了javascript結(jié)合HTML元素屬性實(shí)現(xiàn)一個(gè)圓形的可點(diǎn)擊區(qū)域相關(guān)操作技巧,需要的朋友可以參考下2018-08-08
詳解JavaScript中?.、??和??=的用法及使用場(chǎng)景
這篇文章主要為大家詳細(xì)介紹了JavaScript中?.、??和??=的用法及使用場(chǎng)景,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-08-08
JS實(shí)現(xiàn)圖片旋轉(zhuǎn)動(dòng)畫(huà)效果封裝與使用示例
這篇文章主要介紹了JS實(shí)現(xiàn)圖片旋轉(zhuǎn)動(dòng)畫(huà)效果封裝與使用,結(jié)合實(shí)例形式分析了JavaScript實(shí)現(xiàn)圖片元素旋轉(zhuǎn)的相關(guān)功能代碼的封裝與使用操作技巧,需要的朋友可以參考下2018-07-07
uni-app和原生小程序混合開(kāi)發(fā)的具體實(shí)現(xiàn)過(guò)程
最近項(xiàng)目中遇到了一些功能需要與原生進(jìn)行混合開(kāi)發(fā),所以下面這篇文章主要給大家介紹了關(guān)于uni-app和原生小程序混合開(kāi)發(fā)的具體實(shí)現(xiàn)過(guò)程,需要的朋友可以參考下2022-07-07
JavaScript在瀏覽器標(biāo)題欄上顯示當(dāng)前日期和時(shí)間的方法
這篇文章主要介紹了JavaScript在瀏覽器標(biāo)題欄上顯示當(dāng)前日期和時(shí)間的方法,實(shí)例分析了javascript操作時(shí)間及DOM節(jié)點(diǎn)實(shí)現(xiàn)定時(shí)觸發(fā)的技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-03-03
當(dāng)需要制作轉(zhuǎn)動(dòng)鼠標(biāo)滾輪放大頁(yè)面字體這樣的交互效果時(shí)，會(huì)用到 Mousewheel 事件。2010-09-09
微信小程序中如何使用flyio封裝網(wǎng)絡(luò)請(qǐng)求
這篇文章主要介紹了微信小程序中如何使用flyio封裝網(wǎng)絡(luò)請(qǐng)求，F(xiàn)ly.js 通過(guò)在不同 JavaScript 運(yùn)行時(shí)通過(guò)在底層切換不同的 Http Engine來(lái)實(shí)現(xiàn)多環(huán)境支持，但同時(shí)對(duì)用戶(hù)層提供統(tǒng)一、標(biāo)準(zhǔn)的Promise API,需要的朋友可以參考下2019-07-07
微信小程序按鈕點(diǎn)擊跳轉(zhuǎn)頁(yè)面詳解
這篇文章主要介紹了微信小程序按鈕點(diǎn)擊跳轉(zhuǎn)頁(yè)面，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05