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