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

涉及原创内容，转载请附注明出处