判斷img圖片是否加載成功

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

　　事情是這樣的...在做一個內嵌H5的app時，有一個“個人名片”頁面...要求：如果后台接口有給頭像的圖片鏈接就用他們給的，如果沒給，前端給個默認頭像...測試過程中發現，接口的圖片鏈接有可能是無效的，就像這樣一個鏈接http://www.test.com/wuxiao.png...我們當時的做法是判斷avaterUrl（頭像鏈接字段）是否存在，存在的情況下並不知道這張圖片是否有效...如果是無效圖片鏈接顯示出來的是，很明顯這樣很糟糕...

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

　　當時我就想：前端能不能判斷圖片是否加載成功呢？於是就開始去了解img的加載...（博文只給我目前掌握的最推薦的做法，一些不靠譜的不討論...）

 

　　判斷img是否加載成功需要用到2個事件：onload和onerror...但是什么時候將圖片綁定事件呢？window.onload之后肯定不行，因為window.onload執行時圖片已加載完畢...而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.jb51.net/article/129321.htm

 

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