判斷img圖片是否載入成功

farsun發表於2021-09-09

 上班之餘,記錄一下工作中遇到的有趣問題...

  事情是這樣的...在做一個內嵌H5的app時,有一個“個人名片”頁面...要求:如果後臺介面有給頭像的圖片連結就用他們給的,如果沒給,前端給個預設頭像...測試過程中發現,介面的圖片連結有可能是無效的,就像這樣一個連結我們當時的做法是判斷avaterUrl(頭像連結欄位)是否存在,存在的情況下並不知道這張圖片是否有效...如果是無效圖片連結顯示出來的是圖片描述,很明顯這樣很糟糕...

  ios開發人員說:我們可以知道這張圖片是否載入失敗,失敗的話我們就替換成其他圖片...

  當時我就想:前端能不能判斷圖片是否載入成功呢?於是就開始去了解img的載入...(博文只給我目前掌握的最推薦的做法,一些不靠譜的不討論...)

 

  判斷img是否載入成功需要用到2個事件:和...但是什麼時候將圖片繫結事件呢?window.之後肯定不行,因為window.執行時圖片已載入完畢...而jquery的ready方法也行不通,因為可能img載入圖片失敗時,img並沒有繫結error事件,就會導致不能替換無效的圖片...有人可能會想到事件委託,但是這2個事件是不支援事件委託的...但是,換個思路,全域性繫結load或error事件,然後判斷事件物件是否為img,只對img做操作...

 

1、載入成功

圖片描述

// 圖片載入成功時觸發load事件,失敗不會觸發document.addEventListener("load", function (event) {  var ev=event?event||window.event;  var elem = ev.target;  if (elem.tagName.toLowerCase() == 'img') {  
    //  圖片載入成功
    //  do something...  }
}, true);

圖片描述

 

2、載入失敗

圖片描述

// 圖片載入成功時觸發error事件,成功不會觸發document.addEventListener("error", function (event) {  var ev=event?event||window.event;  var elem = ev.target;  if (elem.tagName.toLowerCase() == 'img') { 
    // 圖片載入失敗  --替換為預設 
    elem.src = "../img/default.jpg";
  }
}, true);

圖片描述

  看似很完美的替換,But,如果你的預設圖片載入也失敗的話...所以還是要寫好alt屬性,提示使用者丟失的圖片內容...

   

   參考連結:

 

    關於圖片載入是否成功了討論告一段落...如有好的方案,歡迎留言評論...

原文出處:https://www.cnblogs.com/chenwenhao/p/9511866.html

來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/4289/viewspace-2812515/,如需轉載,請註明出處,否則將追究法律責任。

相關文章