判斷img圖片是否加載成功

時間 2019-11-22

標籤判斷 img 圖片是否加載成功欄目 HTML 简体版

原文原文鏈接

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

　　事情是這樣的...在作一個內嵌H5的app時，有一個「我的名片」頁面...要求：若是後臺接口有給頭像的圖片連接就用他們給的，若是沒給，前端給個默認頭像...測試過程當中發現，接口的圖片連接有多是無效的，就像這樣一個連接http://www.test.com/wuxiao.png...咱們當時的作法是判斷avaterUrl（頭像連接字段）是否存在，存在的狀況下並不知道這張圖片是否有效...若是是無效圖片連接顯示出來的是，很明顯這樣很糟糕...jquery

　　ios開發人員說：咱們能夠知道這張圖片是否加載失敗，失敗的話咱們就替換成其餘圖片...ios

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

　　判斷img是否加載成功須要用到2個事件：onload和onerror...可是何時將圖片綁定事件呢？window.onload以後確定不行，由於window.onload執行時圖片已加載完畢...而jquery的ready方法也行不通，由於可能img加載圖片失敗時，img並無綁定error事件，就會致使不能替換無效的圖片...有人可能會想到事件委託，可是這2個事件是不支持事件委託的...可是，換個思路，全局綁定load或error事件，而後判斷事件對象是否爲img，只對img作操做...測試

一、加載成功spa

// 圖片加載成功時觸發load事件，失敗不會觸發
document.addEventListener("load", function (event) {
  var ev=event?event||window.event;
  var elem = ev.target;

  if (elem.tagName.toLowerCase() == 'img') {  
    //  圖片加載成功
    //  do something...
  }
}, true);

二、加載失敗.net

// 圖片加載成功時觸發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);