js img圖片載入失敗，重新載入+斷網檢查

JensonWild發表於2017-12-18
JS

我們常常會遇到img載入圖片的時候因為網路問題或者圖片過大導致圖片載入失敗的問題，頁面就因為這張蹦掉的圖變得不美觀。所以我們需要圖片載入失敗的時候重新載入圖片

原文連結www.jianshu.com/p/f63425d22…

//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"; 
    }  
}
複製程式碼

文章首發地址 juejin.im/user/5a30c3…

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

相關文章