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