js針對圖片加載失敗的處理方法分析

更新時間：2019年08月24日 08:52:50 作者：手掌日月摘星辰

這篇文章主要介紹了js針對圖片加載失敗的處理方法,結(jié)合實例形式分析了js針對圖片加載失敗時的事件監(jiān)聽、響應(yīng)等相關(guān)操作技巧,需要的朋友可以參考下

本文實例講述了js針對圖片加載失敗的處理方法。分享給大家供大家參考，具體如下：

在項目中不可避免會用到圖片，尤其是列表，有時候圖片會加載失??；這樣就會顯示一個很難看的壞圖片縮略圖；下面介紹兩種方法，解決這個問題：

1、如果在你的項目中有引入jQuery插件，你可以使用error([[data],fn])這個函數(shù)；

$("img").error(function(){
  //當(dāng)圖片加載失敗時，你要進行的操作
  //$(this).attr('src','images/no_pic.jpg');
});

2、如果項目中沒有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)圖片加載錯誤的時候,觸發(fā)onerror事件，還可使用一下方法進行處理:

①. 隱藏

<img src="" onerror="this.style.display = 'none' ">

②. 用默認的圖片替換：

<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錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》及《JavaScript數(shù)學(xué)運算用法總結(jié)》

希望本文所述對大家JavaScript程序設(shè)計有所幫助。

您可能感興趣的文章:

相關(guān)文章

JS組件系列之Bootstrap table表格組件神器【終結(jié)篇】
Bootstrap Table是輕量級的和功能豐富的以表格的形式顯示的數(shù)據(jù)，支持單選，復(fù)選框，排序，分頁,顯示/隱藏列,固定標(biāo)題滾動表,響應(yīng)式設(shè)計，Ajax加載JSON數(shù)據(jù)，點擊排序的列，卡片視圖等。本文給大家介紹JS組件系列之Bootstrap table表格組件神器【終結(jié)篇】，一起學(xué)習(xí)吧
2016-05-05
js對象數(shù)組根據(jù)對象屬性刪除對象
這篇文章主要介紹了js對象數(shù)組根據(jù)對象屬性刪除對象,需要的朋友可以參考下
2023-07-07
JavaScript通過字符串調(diào)用函數(shù)的實現(xiàn)方法
這篇文章主要介紹了JavaScript通過字符串調(diào)用函數(shù)的實現(xiàn)方法,實例分析了javascript動態(tài)調(diào)用函數(shù)的技巧,需要的朋友可以參考下
2015-03-03
js兩個數(shù)組合并去重的方法大全
這篇文章主要給大家介紹了關(guān)于js兩個數(shù)組合并去重的相關(guān)資料,日常開發(fā)中經(jīng)常會用到的JS數(shù)組去重,文中將每種方法都給出了代碼示例,需要的朋友可以參考下
2023-09-09
常見的javascript跨域通信方法
這篇文章主要介紹了常見的javascript跨域通信方法
2015-12-12
$JS運動特效之鏈?zhǔn)竭\動分析$
JS運動特效之鏈?zhǔn)竭\動分析
這篇文章主要介紹了JS運動特效之鏈?zhǔn)竭\動,結(jié)合實例形式分析了javascript鏈?zhǔn)竭\動的原理與具體實現(xiàn)技巧,需要的朋友可以參考下
2018-01-01
TypeScript中Getter/Setter用法詳解
getter使我們能夠?qū)傩越壎ǖ皆谠L問屬性時調(diào)用的函數(shù),而setter將屬性綁定到在嘗試設(shè)置屬性時調(diào)用的函數(shù),下面就跟隨小編來看看TypeScript中Getter/Setter的用法吧
2024-10-10
[js高手之路]寄生組合式繼承的優(yōu)勢詳解
下面小編就為大家?guī)硪黄猍js高手之路]寄生組合式繼承的優(yōu)勢詳解。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-08-08
javascript iframe內(nèi)的函數(shù)調(diào)用實現(xiàn)方法
用下面的方法可以調(diào)用iframe中的函數(shù)，實現(xiàn)一些比較特殊的效果，不過能跨域的。
2009-07-07
JS實現(xiàn)消滅星星案例
這篇文章主要為大家詳細介紹了JS實現(xiàn)消滅星星案例，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-11-11