如何在Vue中通过@load判断最后一张预加载图片完成渲染？

你的核心问题是用单个布尔值无法区分最后一张图片的加载状态，因为每张图加载都会覆盖这个值。下面提供两种实用的解决方案：

方案一：用计数器追踪加载进度 #

通过记录已加载图片的数量，和需要加载的图片总数对比，相等时即可判定最后一张加载完成。

修改后的代码： #

1. 数据定义

data() {
  return {
    loadedCount: 0, // 已加载图片数量
    totalImgs: 0    // 需要加载的图片总数
  }
},

2. 计算需加载的图片总数

在获取到slices数据后（比如接口请求成功后或mounted钩子中），计算总数：

mounted() {
  // 假设slices已在此处获取完成
  this.totalImgs = this.slices.length - 1; // 因为index>0才渲染图片，所以总数是slices长度减1
}

3. 调整加载回调方法

methods: {
  preload() {
    this.loadedCount++;
    // 当已加载数等于总数时，最后一张图片加载完成
    if (this.loadedCount === this.totalImgs) {
      // 在这里执行你的后续操作，比如隐藏加载动画、初始化交互等
      console.log('最后一张图片已加载完成，执行后续逻辑');
    }
  },
  // 可选：处理图片缓存导致@load不触发的情况
  checkCachedImgs() {
    this.$refs.preloadImgs?.forEach(img => {
      if (img.complete && !img.dataset.loaded) {
        this.loadedCount++;
        img.dataset.loaded = 'true';
        if (this.loadedCount === this.totalImgs) {
          console.log('最后一张图片已加载完成（缓存）');
        }
      }
    });
  }
},
updated() {
  // 每次视图更新后检查缓存的图片
  this.checkCachedImgs();
}

4. 模板调整（添加ref用于缓存检查）

<section v-for="(slice, index) in slices" :key="index" :data-id="index" class="h-screen flex items-center justify-center">
  <div class="max-w-[70%]">
    <img v-if="index > 0" :src="slice.items[0].image.url" @load="preload" ref="preloadImgs">
  </div>
</section>

方案二：用Promise.all批量预加载 #

直接创建图片对象并监听加载状态，通过Promise.all等待所有图片加载完成，无需依赖模板的@load事件。

修改后的代码： #

data() {
  return {
    slices: []
  }
},
async mounted() {
  // 先获取slices数据（示例：接口请求）
  // const response = await fetch('your-api-endpoint');
  // this.slices = await response.json();

  // 收集需要预加载的图片URL（过滤index>0的项）
  const imgUrls = this.slices.slice(1).map(slice => slice.items[0].image.url);

  // 生成图片加载的Promise数组
  const loadPromises = imgUrls.map(url => {
    return new Promise((resolve, reject) => {
      const img = new Image();
      img.src = url;
      img.onload = () => resolve(url);
      img.onerror = () => reject(new Error(`图片加载失败：${url}`));
    });
  });

  try {
    // 等待所有图片加载完成
    await Promise.all(loadPromises);
    // 所有图片（包括最后一张）加载完成，执行后续操作
    console.log('所有图片预加载完成，执行后续逻辑');
  } catch (error) {
    console.error('部分图片加载失败：', error);
    // 可根据需求处理加载失败的情况
  }
}

方案对比 #

• 方案一适合依赖模板渲染图片的场景，能同步DOM渲染状态，同时处理缓存图片的加载判定。
• 方案二更适合主动提前预加载，图片加载完成后再渲染到页面，能提升首屏体验，也更易处理加载失败的情况。

内容的提问来源于stack exchange，提问作者user20047355