使用new Image() 简单实现图片预加载如何在 Vue 中实现图片预加载的一个简单小demo以及优化方案。这里使用

承接上篇文章 new Image() 预加载为什么比直接加载要好？

下面是如何在 Vue 中实现图片预加载的一个简单小demo以及优化方案。

在 Vue 中实现图片预加载

1. 创建一个 Vue 组件

我们将创建一个 Vue 组件，并在其中使用 created 生命周期钩子来预加载图片。这里使用 new Image() 的方式来预加载图片。

2. 示例代码

<template>
  <div>
    <!-- 显示的图片 -->
    <img :src="image1Src" alt="Image 1" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 绑定到页面上的图片路径
      image1Src: "img1.png",
    };
  },
  created() {
    this.preloadImage(this.image1Src); // 预加载图片
  },
  methods: {
    // 预加载图片的方法
    preloadImage(src) {
      const img = new Image(); 
      img.src = src;        
      img.onload = () => {
        console.log('Image loaded:', src); // 图片加载完成后的回调
      };
      img.onerror = () => {
        console.error('Failed to load image:', src); // 图片加载失败的回调
      };
    }
  }
};
</script>

代码解析

当你设置 img.src = src 时，浏览器会开始按照提供的 src 路径去加载图片资源。这个过程包括：

请求：浏览器向服务器发送请求，获取图片文件。
加载：图片文件从服务器下载到浏览器的缓存。
渲染：浏览器在需要显示图片时，从缓存中加载并渲染它。

扩展：在 Vue 中预加载大量图片

如果你需要预加载大量图片，可以通过数组和循环来实现：

export default {
  data() {
    return {
      images: [
        'https://img1.png',
        'https://img1.png',
        'https://img2.png',
        // 其他图片路径
      ]
    };
  },
 created() {
     this.preLoadimg()
 },
 methods: {
      preLoadimg() {
        let count = 0;
        for (let img of this.imgs) {
          let image = new Image();
          image.src = img;
          if (image.complete) {
            console.log('图片已经在缓存中');
            count++;
            if (count === this.imgs.length) {
              console.log('全部加载完成');
            }
          } else {
            image.onload = () => {
              count++;
              if (count === this.imgs.length) {
                console.log('全部加载完成');
              }
            };
          }
        }
      }
    }
};

优点

通过 Vue 组件的生命周期钩子来管理图片预加载，避免影响页面渲染。
使用 new Image() 创建的图片对象不会直接渲染到页面上，因此不会影响页面布局。
可以在组件创建时自动进行图片预加载，提升用户体验。

优化建议

当图片数量较多时，一次性预加载所有图片可能会影响性能，特别是对于移动设备或网络条件较差的用户。因此，可以结合懒加载（Lazy Loading）来提升用户体验。懒加载可以在图片进入视口（viewport）时才进行加载，从而提高初始页面加载速度和用户体验。

懒加载实现
- 使用loading="lazy"
- 或者通过以下步骤来实现图片的懒加载：
  1. 安装依赖：使用 Intersection Observer API 来检测图片是否进入视口。Vue 也有专门的懒加载库，如 vue-lazyload。
  2. 修改组件：在组件中使用懒加载逻辑。

Ps: 此处就不再写示例代码了，可以参考文档 IntersectionObserver

文档传送门

总结

在 Vue 中实现图片预加载是一个简单而高效的过程，通常会通过生命周期钩子函数（如 created）来管理。你可以使用 new Image() 创建图片对象，设置其 src 属性来实现图片的预加载，减少后续访问时的等待时间。具体实现根据自己项目来写。