使用new Image() 简单实现图片预加载

1,187 阅读3分钟

承接上篇文章 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 路径去加载图片资源。这个过程包括:

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

扩展:在 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('全部加载完成');
              }
            };
          }
        }
      }
    }
};

image.png

优点

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

优化建议

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

  • 懒加载实现

    • 使用loading="lazy"

    • 或者通过以下步骤来实现图片的懒加载:

      1. 安装依赖:使用 Intersection Observer API 来检测图片是否进入视口。Vue 也有专门的懒加载库,如 vue-lazyload

      2. 修改组件:在组件中使用懒加载逻辑。

image.png

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

文档传送门

总结

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