【web】图片加载失败,重试三次, 若失败则使用占位图片
需求描述:
加载图片过程中,可能遇见网络不好第一次加载不出来,那么此时,需要重复加载三次,若还是失败就使用默认的占位图
解决思路
监听图片的error事件, 当图片上的error事件被触发,就进入我们自定义的重新加载方法, 其实方法中, 就是需要一个定时器,在规定的时间内, 去给img的src重新赋值, 每一次赋值就相当于刷新图片一次, 当重试的次数,达到我们规定的次数,就将img的src设置为我们默认的占位图, 然后, 这里需要取消定时器.
基本实现
1. 监听图片的error事件
2. 开启一个定时器,假设规定时间内执行一次,即重试
3. 得有一个计数器, 来判断重试的次数
4. 当重试次数大于我们设定的值,关闭定时器,图片地址改为占位图片地址
const img = document.querySelector('img')// 1. 监听图片的error事件img.onerror = (e) => {handleError(img, img.getAttribute('retry'))}function handleError(El, retry) {retry = parseInt(retry)// 开启一个定时器,这里每1500ms执行一次let timer = setTimeout(() => {// 如果重试次数大于3if (retry > 3) {console.log('连接失败')// 图片使用占位图片urlEl.src = 'https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png'// 存在的图片地址// 清除定时器clearTimeout(timer)} else {// 重试次数在规定内console.log('重试次数', retry)// 计数器+1retry += 1El.setAttribute('retry',retry)El.src = 'https://www.baidu.com/img.png' //不存在的图片地址}}, 1500)}
总结
该问题为面试中被问到的, 面试结束在此做个记录.
前端菜鸟, 感谢您的观看, 如果感觉还可以希望给个点赞
【web】图片加载失败,重试三次, 若失败则使用占位图片相关推荐
- Android Glide图片加载框架（三）缓存机制
文章目录 一.缓存简介 二.缓存用法 内存缓存方式 磁盘缓存方式 三.缓存KEY 四.内存缓存 内存缓存流程 五.磁盘缓存 磁盘缓存流程 Android Glide图片加载框架系列文章 Android ...
- 推荐JS插件：imagesLoaded，监测图片加载情况并提供相应的事件（加载成功/失败）...
惯例,首先贴上imagesLoaded的官方网址:http://imagesloaded.desandro.com/ 第一次知道imagesLoaded这个插件是在做瀑布流布局时,当时选用的是maso ...
- Android图片加载神器之Fresco，基于各种使用场景的讲解
Fresco是Facebook开源Android平台上一个强大的图片加载库,也是迄今为止Android平台上最强大的图片加载库. 优点:相对于其他开源的第三方图片加载库,Fresco拥有更好的内存管理 ...
- Android图片加载神器之Fresco， 基于各种使用场景的讲解
Fresco是Facebook开源Android平台上一个强大的图片加载库,也是迄今为止Android平台上最强大的图片加载库. 优点:相对于其他开源的第三方图片加载库,Fresco拥有更好的内存管理 ...
- Android 图片加载开源框架Fresco，基于各种使用场景的讲解
Fresco是Facebook开源Android平台上一个强大的图片加载库,也是迄今为止Android平台上最强大的图片加载库. 优点:相对于其他开源的第三方图片加载库,Fresco拥有更好的内存管理 ...
- Fresco最强图片加载框架详解及使用
版权声明:本文为博主原创文章,未经博主允许不得转载. 转载请标明出处:http://blog.csdn.net/android_ls/article/details/53137867 Fresco是F ...
- 图片加载神器之Fresco，基于各种使用场景的讲解
转载请标明出处:http://blog.csdn.net/android_ls/article/details/53137867 Fresco是Facebook开源Android平台上一个强大的图片加 ...
- Compose-jb图片加载库load-the-image,适用于KMM Compose desktop桌面端(Windows,Linux,MacOs)
前言 Android平台上有很多优秀的图片加载框架,比如Glide,Picasso,Fresco 而Compose-jetpack上的图片加载框架有Coil 但Compose-jb上却暂时没有图片加载 ...
- Android Glide图片加载框架（二）源码解析之into()
文章目录 一.前言 二.源码解析 1.into(ImageView) 2.GlideContext.buildImageViewTarget() 3.RequestBuilder.into(Targe ...
最新文章
- DPDK — 架构解析
- linux下查看当前用户的 三个命令
- nginx虚拟主机概念和类型介绍
- 让企业零成本拥有自己独立的企业网站不再是问题...
- python计算a的平方加b的平方_NumPy计算范数2的平方
- TextView 单行显示长文本
- Elasticsearch启动报错：Exception in thread “main“ java.nio.file.AccessDeniedException:
- visual foxpro 程序员指南_好程序员云计算培训分享云计算中SOA是什么？
- Stackops快速部署手册
- vue ---- ref
- hiho 第1周 最长回文子串
- [Java] 蓝桥杯ALGO-122 算法训练 未名湖边的烦恼
- java类加载器ClassLoader浅析
- 批处理获取管理员权限
- 思科模拟器cisco模拟器
- python的spider如何让鼠标不_python wooyun爬虫模拟鼠标等
- Python编写时钟表turtle
- 无法定位序数XX于动态链接库XX.dll的解决的方法
- angular使用echarts词云图wordCloud
- 项目管理知识体系指南（六）项目成本管理