js img图片加载失败,重新加载+断网检查
JS 图片 加载 失败 检查 重新 img 断网
2023-09-27 14:26:44 时间
我们常常会遇到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
涉及原创内容,转载请附注明出处
相关文章
- 微信公众号 - js传入时间戳换算(以前几天、几小时...)
- 第七节:语法总结(1)(自动属性、out参数、对象初始化器、var和dynamic等) 图片放大镜 JavaScript-基础 用javascript写原生ajax(笔记) 初遇 Asp.net MVC 数据库依赖缓存那些事儿 前端JS 与 后台C# 之间JSON序列化与反序列化(笔记)
- js 图片类型mage/jpeg, image/bmp, image/gif ,image/png
- JS基础 Set 用于存储任何类型的唯一值
- Egg.js 实现向服务器上传图片
- uni-app - 将 base64 图片编码转为 Blob 本地文件路径(把base64类型的图片,转换成blob二进制文件流)适用于 uni-app / vue.js / JavaScript
- node.js搭建简单的博客服务器(无数据库)
- JS leetcode 买卖股票的最佳时机 题解分析,我离职了。
- js图片延迟加载
- 一些通用的js工具类,添加自定义插件
- 微信JS-SDK选择图片遇到的坑
- js图片加载效果(延迟加载+瀑布流加载)
- js swipe 图片滑动控件实现 任意尺寸适用任意屏幕
- JS随机显示一张图片
- js 图片保存至手机相册
- swiper动态加载数据滑动失效,ajax执行后swiper.js的效果消失问题
- Java/Js下使用正则表达式匹配嵌套Html标签
- arcgis api 4.x for js 自定义叠加图片图层实现地图叠加图片展示(附源码下载)
- arcgis api 3.x for js 入门开发系列四地图查询(附源码下载)
- js绝对地址图片转换成base64的方法
- JS魔法堂之实战:纯前端的图片预览
- js获取字符串最后一位方法
- JS使用onscroll、scrollTop实现图片懒加载
- three.js 加载STL文件
- js 数组内删除某个对象(或确定该对象索引值)
- Three.js Example 注解 —— canvas_interactive_particles.html