<template>
  <div>
    <img class="gaung-img" :src="currentImgSrc" alt="" @load="handleImageLoad" />
    <img class="gaung-img" v-for="(imgSrc, index) in imgList" :key="index" :src="imgSrc" alt=""
         style="display: none;" @load="handleImageLoad" />
  </div>
</template>

<script>
  export default {
    data() {
      return {
        currentFrameIndex: 0,
        imgList: ['static/an/g/1.png', 'static/an/g/2.png', 'static/an/g/3.png', 'static/an/g/4.png',
          'static/an/g/5.png', 'static/an/g/6.png', 'static/an/g/7.png', 'static/an/g/8.png',
          'static/an/g/9.png', 'static/an/g/10.png', 'static/an/g/11.png', 'static/an/g/12.png',
          'static/an/g/13.png', 'static/an/g/14.png', 'static/an/g/15.png', 'static/an/g/16.png',
          'static/an/g/17.png', 'static/an/g/18.png', 'static/an/g/19.png', 'static/an/g/20.png',
          'static/an/g/21.png', 'static/an/g/22.png', 'static/an/g/23.png', 'static/an/g/24.png',
          'static/an/g/25.png'
        ],
        delay: 20,
        imagesLoaded: 0,
        totalImages: 0,
		timer:null
      };
    },
    computed: {
      currentImgSrc() {
        return this.imgList[this.currentFrameIndex];
      }
    },
    mounted() {
      // Count the total number of images
      this.totalImages = this.imgList.length;
      // Start animation
      this.startAnimation();
    },
    methods: {
      startAnimation() {
        this.timer = setInterval(() => {
          this.currentFrameIndex = (this.currentFrameIndex + 1) % this.imgList.length;
        }, this.delay);
      },
      handleImageLoad() {
        // Increment the count of loaded images
        this.imagesLoaded++;
        // Check if all images are loaded
        if (this.imagesLoaded === this.totalImages) {
          // Perform action after all images are loaded
          console.log("All images loaded.");
        }
      }
    },
  onUnload() {
	// 在页面离开时清除定时器
	clearInterval(this.timer)
  }
  };
</script>

<style lang="scss" scoped>
  .gaung-img {
    width: 100%;
    height: 100vh;
    object-fit: contain;
  }
</style>
