【web】图片加载失败,重试三次, 若失败则使用占位图片

需求描述:

加载图片过程中,可能遇见网络不好第一次加载不出来,那么此时,需要重复加载三次,若还是失败就使用默认的占位图

解决思路

监听图片的error事件, 当图片上的error事件被触发,就进入我们自定义的重新加载方法, 其实方法中, 就是需要一个定时器,在规定的时间内, 去给img的src重新赋值, 每一次赋值就相当于刷新图片一次, 当重试的次数,达到我们规定的次数,就将img的src设置为我们默认的占位图, 然后, 这里需要取消定时器.

基本实现

1. 监听图片的error事件

2. 开启一个定时器,假设规定时间内执行一次,即重试

3. 得有一个计数器, 来判断重试的次数

4. 当重试次数大于我们设定的值,关闭定时器,图片地址改为占位图片地址

 const img = document.querySelector('img')
 // 1. 监听图片的error事件