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

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