vue图片预加载，加载过程中显示进度条

页面中想把图片都加载完成之后在显示页面

进度条使用vant,Progress

<template>
   <div class="initial-progress">
          <van-progress
            :pivot-text="''"
            stroke-width="8px"
            color="#3873FA"
            track-color="#DEEBFF"
            :percentage="percentage"
          />
         <div class="proNum">{{ percentage }}%</div>
    </div>
</template>
 
<script>
export default {
  data() {
    return {
      percentage:0,
      count: 0,
    };
  },
watch: {
    percentage: function (val) {
      // 图片加载完成
      if (val === 100) {
        
      }
    
    },
  },
  mounted() {
    this.loadPercentage()
  },
  methods: {
    //图片预加载，加载出进度条
    loadPercentage() {
      let imgs = [
        "@img/img1.png",
        "@img/img2.png",
        "@img/img3.png",
        "@img/img4.png",
        "@img/img5.png",
        "@img/img6.png",
        "@img/img7.png",
        "@img/img8.png",
        "@img/img9.png",
        "@img/img10.png",
      ];
      for (let img of imgs) {
        let image = new Image();
        image.src = img;
        image.onload = () => {
          this.count++;
          let percentNum = Math.floor((this.count / imgs.length) * 100);
          this.percentage = percentNum;
        };
      }
     }
   },
};
</script>