js img图片加载失败，重新加载+断网检查

April 发布于2019-08-21 18:47 / 3221人阅读

摘要：我们常常会遇到加载图片的时候因为网络问题或者图片过大导致图片加载失败的问题，页面就因为这张蹦掉的图变得不美观。

我们常常会遇到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";  
        }  
  
    }  
  
//调用  
 
//该逻辑摘自网络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
结合上面的图片重新加载逻辑
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
涉及原创内容，转载请附注明出处

云服务器 GPU云服务器 js 重新加载 js重新加载数据 js重新加载页面 js 视频重新加载

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/90807.html

简单的js图片压缩上传，支持IE10及以上浏览器

摘要：压缩部分是从网上搞下来的上传部分是自己写的，相当于在其他人的基础上完善了这个压缩上传流程。文本框选择图片默认进行上传，有时间再改一下按钮上传。压缩部分是从网上搞下来的,上传部分是自己写的，相当于在其他人的基础上完善了这个压缩上传流程。压缩部分，压缩率一般，重在浏览器支持方面好些，使用了FileReader和Canvas实现，FileReader浏览器支持方面还不错：showImg(...

blair 2019-08-26 11:38 评论0 收藏0
原生 js 实现面对对象版瀑布流

摘要：一一些闲话作为一个写静态的切图仔，其实日常工作中根本用不上瀑布流这种小清新，毕竟营销页面都是要求抢眼吸睛高大上文案爸爸说啥都对。昨上午闲着没事看到别人写的瀑布流的帖子，觉得很好玩的样子，然后决定上午就写一个试试。。。一、一些闲话作为一个写静态的切图仔，其实日常工作中根本用不上瀑布流这种小清新，毕竟营销页面都是要求抢眼__、__吸睛__、 __高大上（文案爸爸说啥都对）。昨上...

tommego 2019-08-23 14:01 评论0 收藏0
[译]如何构建自己的Progressive Image Loader

摘要：最后，我们必须调用函数来检查所有的渐进式图片容器在首次运行时是否在页面上可见。我们还必须在滚动页面或调整浏览器大小时调用函数，在一些旧的浏览器主要指可以非常迅速地对这些事件作出回应，所以我们需要限制回调，以确保它不能在毫秒内被再一次调用。你可以在Facebook和Medium上遇到过渐进式图片，当页面滚动到视图时，模糊的低分辨率图像会被清晰的全分辨率版本替换。 showImg(htt...

cartoon 2019-08-29 12:14 评论0 收藏0
前端资源加载重试

摘要：资源加载重试，则是提高用户体验中重要的一环。对加载失败的进行重试。一个，有时候会包括及资源，其中一个加载失败便会发起重试，直到有一个资源重试了次就判断为失败。通过资源加载重试，可大大减少中加载异步的页面文件时，失败而导致白屏的问题。介绍对于TO C的应用，用户网络千差万别，总有各种网络问题导致资源加载失败，使得访问时出现白屏，样式错乱等。资源加载重试，则是提高用户体验中重要的一环。...

Prasanta 2019-08-23 15:28 评论0 收藏0
构建离线WEB应用

摘要：使用离线应用构建应用服务端服务器配置创建文件客户端构建，并在标签上添加属性，属性值是服务器上配置的缓存资源列表的文件名配置相关事件，创建离线文件内容将状态代码转化成状态离线应用创建即使没有互联网连接也可以使用的应用程序。 HTML5新增了localstroage和application cache做离线缓存，两种缓存各有应用的场景，今天我们说说application cache这种方案...

shleyZ 2019-08-26 13:48 评论0 收藏0