欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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)圖片加載失敗時，你要進(jìn)行的操作
  //$(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事件，還可使用一下方法進(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錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》及《JavaScript數(shù)學(xué)運算用法總結(jié)》

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

相關(guān)文章

  • Bootstrap基礎(chǔ)學(xué)習(xí)

    Bootstrap基礎(chǔ)學(xué)習(xí)

    Bootstrap是Twitter推出的一個用于前端開發(fā)的開源工具包。它由Twitter的設(shè)計師Mark Otto和Jacob Thornton合作開發(fā)，是一個CSS/HTML框架。它使用了流行的瀏覽器技術(shù)，給web開發(fā)提供了時尚的版式，表單，buttons，表格，網(wǎng)格系統(tǒng)等等。
    2015-06-06
  • js中數(shù)組插入、刪除元素操作的方法

    js中數(shù)組插入、刪除元素操作的方法

    下面小編就為大家?guī)硪黄猨s中數(shù)組插入、刪除元素操作的方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2017-02-02
  • 使用js實現(xiàn)將后臺傳入的json數(shù)據(jù)放在前臺顯示

    使用js實現(xiàn)將后臺傳入的json數(shù)據(jù)放在前臺顯示

    今天小編就為大家分享一篇使用js實現(xiàn)將后臺傳入的json數(shù)據(jù)放在前臺顯示，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-08-08
  • js jquery數(shù)組介紹

    js jquery數(shù)組介紹

    js jquery數(shù)組介紹，數(shù)組時編程中比較常用的處理，需要的朋友可以參考下
    2012-07-07
  • element-ui?對話框dialog使用echarts報錯'dom沒有獲取到'的問題

    element-ui?對話框dialog使用echarts報錯'dom沒有獲取到'的問題

    這篇文章主要介紹了element-ui?對話框dialog里使用echarts，報錯'dom沒有獲取到'的問題，在這個事件里邊進(jìn)行echarts的初始化，執(zhí)行數(shù)據(jù)，本文結(jié)合實例代碼給大家詳細(xì)講解,需要的朋友可以參考下
    2022-11-11
  • [JS]實現(xiàn)動態(tài)增加框架！未完成

    [JS]實現(xiàn)動態(tài)增加框架！未完成

    [JS]實現(xiàn)動態(tài)增加框架！未完成...
    2007-03-03
  • javascript字符串與數(shù)組轉(zhuǎn)換匯總

    javascript字符串與數(shù)組轉(zhuǎn)換匯總

    本文給大家分享的是Js中字符串轉(zhuǎn)換成數(shù)組，數(shù)組轉(zhuǎn)換成字符串的函數(shù)，十分的簡單實用，有需要的小伙伴可以參考下。
    2015-05-05
  • three.js利用射線Raycaster進(jìn)行碰撞檢測

    three.js利用射線Raycaster進(jìn)行碰撞檢測

    這篇文章主要為大家詳細(xì)介紹了three.js利用射線Raycaster進(jìn)行碰撞檢測，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2020-03-03
  • 淺談bootstrap layer.open中end的使用方法

    淺談bootstrap layer.open中end的使用方法

    今天小編就為大家分享一篇淺談bootstrap layer.open中end的使用方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
    2019-09-09
  • JS獲取本機IP地址的2種方法

    JS獲取本機IP地址的2種方法

    我們在項目經(jīng)常遇到獲取本機IP地址的需求,下面這篇文章主要給大家介紹了關(guān)于JS獲取本機IP地址的2種方法,文中通過示例代碼介紹的非常詳細(xì),本文適合新手,需要的朋友可以參考下
    2022-09-09

最新評論