图片加载失败重试,重试至预期次数使用占位图

支持自定义重试次数,支持重试回调,支持重试使用备用域名。 这里使用自定义指令做了封装,可读性MAX!!!

运行截图 调用方式

ini 复制代码
    <img
      v-useReload="{
        src: 'https://user-images.githubusercontent.com/10731096/95823103-9ce15780-0d5f-11eb-8010-1bd1b5910d4f.png',
        callback: (e, count) => {
          console.log('重试次数:', count, e);
        },
      }"
      src="https://user-images.githubusercontent.com/10731096/95823103-9ce15780-0d5f-11eb-8010-1bd1b5910d4f2.png"
    />
    <img
      v-useReload="reload"
      src="https://user-images.githubusercontent.com/10731096/95823103-9ce15780-0d5f-11eb-8010-1bd1b5910d4f2.png"
    />

话不多说直接上代码

ini 复制代码
/**
 * Description
 * 方式一:<DOM v-useReload />
 * 方式二:<DOM v-useReload="{errorImg,maxRetries,src,callback}" />
 * 方式三:<DOM v-useReload="callback" />
 * @author ZHYCH
 * @date 2024-12-27
 * @param {any} el:HTMLElement
 * @param {any} binding:DirectiveBinding<option>
 * @returns {any}
 */
import { DirectiveBinding } from 'vue';
import errorimg from '@/assets/imgerror.svg';

type callback = (retryCount: number) => void;

interface option {
  errorSrc?: string; //失败地址
  maxRetries?: number; // 最大重试次数
  src?: string; //备用地址
  callback?: callback; //失败回调
}

export default {
  beforeMount(el: HTMLElement, binding: DirectiveBinding<option | null | callback>) {
    const { value } = binding;
    const isObject = typeof value === 'object' && value !== null;

    const maxRetries = value?.maxRetries ?? 3;
    const src = value?.src ?? el.src;
    const errorSrc = value?.errorImg ?? errorimg;
    const callback = isObject ? value?.callback : value;

    let retryCount = 0; // 当前重试次数

    const reloadImage = () => {
      if (retryCount < maxRetries) {
        retryCount++;
        el.src = '';

        setTimeout(() => {
          callback?.(el, retryCount);
          el.src = src;
        }, 0);
      } else {
        el.src = errorSrc;
      }
    };

    el.addEventListener('error', reloadImage);

    // 清理事件监听器
    el._reloadImage = reloadImage;
  },
  unmounted(el: HTMLElement) {
    el.removeEventListener('error', el._reloadImage);
  },
};
相关推荐
程序无bug2 分钟前
Spring 面向切面编程AOP 详细讲解
java·前端
zhanshuo2 分钟前
鸿蒙UI开发全解:JS与Java双引擎实战指南
前端·javascript·harmonyos
撰卢26 分钟前
如何提高网站加载速度速度
前端·javascript·css·html
10年前端老司机31 分钟前
在React项目中如何封装一个可扩展,复用性强的组件
前端·javascript·react.js
Struggler28134 分钟前
解决setTimeout/setInterval计时不准确问题的方案
前端
sophie旭42 分钟前
《深入浅出react开发指南》总结之 10.1 React运行时总览
前端·react.js·源码阅读
蓝易云44 分钟前
Qt框架中connect()方法的ConnectionType参数使用说明 点击改变文章字体大小
linux·前端·后端
sophister1 小时前
Flex 布局中容易踩的那些坑,你踩过几个?
前端·css·html
lemonzoey1 小时前
Node.js child_process 核心 API 详解
前端·javascript
linda26181 小时前
本质上,Taro 是一个 跨平台编译框架
前端·taro