js注意img圖片的onerror事件的分析
更新時(shí)間：2011年01月01日 18:23:04 作者：
打開網(wǎng)頁時(shí)提示 Stack overflow at line: 0。img圖片的onerror事件需要注意的細(xì)節(jié)。
經(jīng)過分析，發(fā)現(xiàn)網(wǎng)頁中存在類似如下的代碼：
<img src="pic.gif" onerror="javascript:this.src='/noPic.gif';" alt="pic" />
分析：特別注意 onerror，當(dāng)圖片不存在時(shí)，將觸發(fā) onerror，而 onerror 中又為 img 指定一個(gè) NoPic.gif 圖片。也就是說圖片存在則顯示 pic.gif，圖片不存在將顯示 noPic.gif。但問題來了，如果 noPic.gif 也不存在，則繼續(xù)觸發(fā) onerror，導(dǎo)致循環(huán)，故出現(xiàn)錯(cuò)誤。
說明：如果圖片存在，但網(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 圖片。也就是說圖片存在則顯示 pic.gif，圖片不存在將顯示 noPic.gif。但問題來了，如果 noPic.gif 也不存在，則繼續(xù)觸發(fā) onerror，導(dǎo)致循環(huán)，故出現(xiàn)錯(cuò)誤。
說明：如果圖片存在，但網(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)畫是否已經(jīng)完成的方法
- javascript字典探測(cè)用戶名工具
- 用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通過使用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)文章
微信小程序?qū)崿F(xiàn)提交input信息到后臺(tái)的方法示例
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)提交input信息到后臺(tái)的方法,結(jié)合實(shí)例形式分析了微信小程序提交input信息到后臺(tái)相關(guān)事件響應(yīng)與數(shù)據(jù)處理操作技巧,需要的朋友可以參考下2019-01-01
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)移動(dòng)端輪播圖效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-08-08
JS使用AudioContext實(shí)現(xiàn)音頻流實(shí)時(shí)播放
這篇文章主要為大家詳細(xì)介紹了JavaScript如何使用AudioContext實(shí)現(xiàn)音頻流實(shí)時(shí)播放功能,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-01-01
微信小程序?qū)崿F(xiàn)MUI數(shù)字輸入框效果
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)MUI數(shù)字輸入框效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-01-01
詳解axios中封裝使用、攔截特定請(qǐng)求、判斷所有請(qǐng)求加載完畢）
這篇文章主要介紹了axios中封裝使用、攔截特定請(qǐng)求、判斷所有請(qǐng)求加載完畢的相關(guān)知識(shí)，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-04-04
Bootstrap 工具提示（Tooltip）插件 當(dāng)您想要描述一個(gè)鏈接的時(shí)候，工具提示（Tooltip）就顯得非常有用。這篇文章通過實(shí)例代碼給大家介紹bootstrap的工具提示功能，需要的朋友參考下吧2017-05-05
這篇文章主要為大家詳細(xì)介紹了pageGroup.js實(shí)現(xiàn)分頁功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-07-07
IE FF OPERA都可用的彈出層實(shí)現(xiàn)代碼
多瀏覽器的彈出層效果核心代碼。需要的朋友可以測(cè)試下這個(gè)是從正在使用的網(wǎng)站中扒下來的。2009-09-09
JavaScript代碼實(shí)現(xiàn)txt文件的上傳預(yù)覽功能
本篇文章給大家介紹了JavaScript代碼實(shí)現(xiàn)txt文件的上傳預(yù)覽功能，文字代碼相結(jié)合的形式給大家介紹的非常詳細(xì)，需要的朋友參考下吧2018-03-03
下面小編就為大家?guī)硪黄贓S6 Array.of的用法(實(shí)例講解)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09