Vue使用new Image()实现图片预加载功能

<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>

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