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

支持自定义重试次数,支持重试回调,支持重试使用备用域名。 这里使用自定义指令做了封装,可读性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);
  },
};
相关推荐
yzhSWJ15 分钟前
CSS Position 属性完全指南
前端·css
xcLeigh21 分钟前
HTML5好看的水果蔬菜在线商城网站源码系列模板7
前端·html·html5
非凡网站36 分钟前
企业网站html源代码 企业网站管理源码模板
前端·html
brzhang1 小时前
接口又乱又难用?老司机带你掌握 8 个 API 设计绝招,告别低效协作!
前端·后端·架构
brzhang1 小时前
搞懂 HTTP/1、HTTP/2、HTTP/3:让你的 Web 应用快如闪电,面试不再怕!
前端·后端·架构
林太白1 小时前
NestJS用户模块CRUD和分页实现
前端·javascript·nestjs
诸神缄默不语1 小时前
已有 npm 项目,如何下载依赖、编译并运行项目
前端·npm·node.js
brzhang1 小时前
JS 代码是如何跑起来的?带你深入 V8 引擎和事件循环的幕后
前端·javascript·后端
天天扭码1 小时前
面试常考 | 深入理解 JavaScript 中手写 new 操作符
前端·javascript·面试
去伪存真1 小时前
现学现用之Jenkins--从泛泛了解到实操
前端·jenkins