判斷img圖片是否載入成功

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

　　事情是這樣的...在做一個內嵌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