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

需求描述:

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

解决思路

监听图片的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(() => {
        // 如果重试次数大于3
            if (retry > 3) {
                console.log('连接失败')
                // 图片使用占位图片url
                El.src = 'https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png'// 存在的图片地址
                // 清除定时器
                clearTimeout(timer)

            } else {
            // 重试次数在规定内
                console.log('重试次数', retry)
                // 计数器+1
                retry += 1
                El.setAttribute('retry',retry)
                El.src = 'https://www.baidu.com/img.png' //不存在的图片地址
            }
        }, 1500)

    }

总结

该问题为面试中被问到的, 面试结束在此做个记录. 前端小白, 感谢您的观看, 如果感觉还可以希望给个点赞👍. 感谢! 如有错误, 烦请各位大佬指出. 小弟将马上改正!