js img圖片加載失敗，從新加載+斷網檢查

咱們經常會遇到img加載圖片的時候由於網絡問題或者圖片過大致使圖片加載失敗的問題，頁面就由於這張蹦掉的圖變得不美觀。因此咱們須要圖片加載失敗的時候從新加載圖片

//js方法定義  
function resetImgUrl(imgObj,imgSrc,maxErrorNum){  
      if(maxErrorNum > 0){  
            imgObj.onerror=function(){  
              reSetImgUrl(imgObj,imgSrc,maxErrorNum-1);  
            };  
            setTimeout(function(){  
                imgObj.src=imgSrc;  
            },500);  
        }else{  
            imgObj.onerror=null;  
            imgObj.src="<%=basePath%>images/noImg.png";  
        }  
  
    }  
  
//調用  
<img onerror='resetImgUrl(this,this.src,3)' src='"+srcStr+"'/> 
//該邏輯摘自網絡http://sunshuaij2ee.iteye.com/blog/1727993

判斷網絡鏈接狀況,從新鏈接網絡時再請求圖片

var onLine = true
var eventList = {} ;//用於儲存待從新執行函數的事件列表
window.addEventListener('offline',function(){
    onLine = false;
})
window.addEventListener('online',function(){
    if(onLine == false){
       onLine = true; 
       reLine();
    }
})
//從新鏈接網絡的時候從新調用事件列表對象裏面的函數
function reLine(){
    for(var key in eventList){
        if(!eventList[key])continue
        var arg = eventList[key].arg;
        var thisOnFn = eventList[key].that;
        eventList[key].fun.apply(thisOnFn,arg);
        eventList[key] = null;
    }
}
//已經斷網了，把函數存儲到一個對象裏面
function offlined(fun,arg,that){
    if(!onLine){
        //arg = arguments;
        var name = fun.name||'__new';
        eventList[name] = {};
        eventList[name].fun = fun;//原函數
        eventList[name].that = that;//原上下文對象
        eventList[name].arg = [].slice.call(arg);//原參數
        return true
    }
    return false
}

測試一下（把代碼複製到chrome的console裏面運行）

function aa(){
    offlined(aa,arguments,this)
    for(var i=0 ; i<arguments.length;i++){
        console.log(arguments[i]);
    }
}
//斷開網絡再執行一下代碼
aa(123,234,345)
//先輸出一遍
123 234 345
//再鏈接上網絡後看輸出
123 234 345

結合上面的圖片從新加載邏輯

function resetImgUrl(imgObj,imgSrc,maxErrorNum){
    if(offlined(reSetImgUrl,arguments,this))return
    if(maxErrorNum > 0){  
        imgObj.onerror=function(){  
            reSetImgUrl(imgObj,imgSrc,maxErrorNum-1);  
        };  
        setTimeout(function(){  
            imgObj.src=imgSrc;  
        },500);  
    }else{  
        imgObj.onerror=null;  
        imgObj.src="<%=basePath%>images/noImg.png"; 
    }  
}

文章首發地址 https://juejin.im/user/5a30c3736fb9a044ff317351

涉及原創內容，轉載請附註明出處