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

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