js針對圖片加載失敗的處理方法分析
本文實(shí)例講述了js針對圖片加載失敗的處理方法。分享給大家供大家參考，具體如下：
在項(xiàng)目中不可避免會(huì)用到圖片，尤其是列表，有時(shí)候圖片會(huì)加載失??；這樣就會(huì)顯示一個(gè)很難看的壞圖片縮略圖；下面介紹兩種方法，解決這個(gè)問題：
1、如果在你的項(xiàng)目中有引入jQuery插件，你可以使用error([[data],fn])這個(gè)函數(shù)；
$("img").error(function(){
//當(dāng)圖片加載失敗時(shí)，你要進(jìn)行的操作
//$(this).attr('src','images/no_pic.jpg');
});
2、如果項(xiàng)目中沒有jQuery這樣的插件，可以使用HTML的DOM事件onerror事件處理；
HTML 中:
<element οnerrοr="myScript">
嘗試一下
JavaScript 中:
object.οnerrοr=function(){myScript};
嘗試一下
JavaScript 中, 使用 addEventListener() 方法:（注意： Internet Explorer 8 及更早 IE 版本不支持 addEventListener() 方法。）
object.addEventListener("error", myScript);
支持的 HTML 標(biāo)簽: <img>, <input type="image">, <object>, <script>, <style>
另外，當(dāng)圖片加載錯(cuò)誤的時(shí)候,觸發(fā)onerror事件，還可使用一下方法進(jìn)行處理:
①. 隱藏
<img src="" onerror="this.style.display = 'none' ">
②. 用默認(rèn)的圖片替換：
<img src="" onerror="this.src='banner_1.png';this.onerror='null' ">
PS：這里再為大家附上javascript系統(tǒng)自帶事件參考表供大家參考查詢：
javascript事件與功能說明大全：
http://tools.jb51.net/table/javascript_event
更多關(guān)于JavaScript相關(guān)內(nèi)容可查看本站專題：《JavaScript事件相關(guān)操作與技巧大全》、《JavaScript常用函數(shù)技巧匯總》、《javascript面向?qū)ο笕腴T教程》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對大家JavaScript程序設(shè)計(jì)有所幫助。
相關(guān)文章
JS組件系列之Bootstrap table表格組件神器【終結(jié)篇】
Bootstrap Table是輕量級(jí)的和功能豐富的以表格的形式顯示的數(shù)據(jù)，支持單選，復(fù)選框，排序，分頁,顯示/隱藏列,固定標(biāo)題滾動(dòng)表,響應(yīng)式設(shè)計(jì)，Ajax加載JSON數(shù)據(jù)，點(diǎn)擊排序的列，卡片視圖等。本文給大家介紹JS組件系列之Bootstrap table表格組件神器【終結(jié)篇】，一起學(xué)習(xí)吧2016-05-05
這篇文章主要介紹了js對象數(shù)組根據(jù)對象屬性刪除對象,需要的朋友可以參考下2023-07-07
JavaScript通過字符串調(diào)用函數(shù)的實(shí)現(xiàn)方法
這篇文章主要介紹了JavaScript通過字符串調(diào)用函數(shù)的實(shí)現(xiàn)方法,實(shí)例分析了javascript動(dòng)態(tài)調(diào)用函數(shù)的技巧,需要的朋友可以參考下2015-03-03
這篇文章主要給大家介紹了關(guān)于js兩個(gè)數(shù)組合并去重的相關(guān)資料,日常開發(fā)中經(jīng)常會(huì)用到的JS數(shù)組去重,文中將每種方法都給出了代碼示例,需要的朋友可以參考下2023-09-09
這篇文章主要介紹了常見的javascript跨域通信方法2015-12-12
JS運(yùn)動(dòng)特效之鏈?zhǔn)竭\(yùn)動(dòng)分析
這篇文章主要介紹了JS運(yùn)動(dòng)特效之鏈?zhǔn)竭\(yùn)動(dòng),結(jié)合實(shí)例形式分析了javascript鏈?zhǔn)竭\(yùn)動(dòng)的原理與具體實(shí)現(xiàn)技巧,需要的朋友可以參考下2018-01-01
getter使我們能夠?qū)傩越壎ǖ皆谠L問屬性時(shí)調(diào)用的函數(shù),而setter將屬性綁定到在嘗試設(shè)置屬性時(shí)調(diào)用的函數(shù),下面就跟隨小編來看看TypeScript中Getter/Setter的用法吧2024-10-10![[js高手之路]寄生組合式繼承的優(yōu)勢詳解](http://img.jbzj.com/images/xgimg/bcimg7.png)
下面小編就為大家?guī)硪黄猍js高手之路]寄生組合式繼承的優(yōu)勢詳解。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-08-08
javascript iframe內(nèi)的函數(shù)調(diào)用實(shí)現(xiàn)方法
用下面的方法可以調(diào)用iframe中的函數(shù)，實(shí)現(xiàn)一些比較特殊的效果，不過能跨域的。2009-07-07
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)消滅星星案例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-11-11