圖片onerror的性能優化及addEventListener的第三個參數

圖片onerror,比如404的時候 替換成另外一張圖片,需要爲每個img添加onerror事件 性能不好,而且不支持動態添加的img標籤。


受 http://www.ovaldi.org/2015/09/11/以全局監聽的方式處理img的error事件/ 的啓發,使用addEventListener的第三個參數,設置爲true

關鍵代碼如下:

var coverInitialed = false;
util.covererror = function (selector) {
  if (coverInitialed) return;
  
  if (document.addEventListener && document.removeEventListener){ //現代瀏覽器 根節點捕獲
    
    var errorhandler = function(e){
      var elem = e.target;
      if($(elem).parent().is('.user_img')){   //出錯的節點並不多
        elem.src = KK.PARAM.DEFAUT_COVER;
      }
    };
    
    document.addEventListener("error", errorhandler, true /*指定事件處理函數在捕獲階段執行*/);

    setTimeout(function () {
      document.removeEventListener('error',errorhandler,true);
    },5000);
  }else{ // IE 遍歷
    $(selector+'').on('error',function (e) {
      $(this).attr('src',KK.PARAM.DEFAUT_COVER );
      $(this).off('error');
      return true;
    });
  }
  coverInitialed = true;
};

測試發現如果網絡不好或者圖片服務器有問題,會重複觸發大量的error 因此設置了5秒後移除這個圖片error事件監聽器。
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章