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

ZHYCH2024-12-28 18:29

支持自定义重试次数，支持重试回调，支持重试使用备用域名。这里使用自定义指令做了封装，可读性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);
  },
};