<template>
  <main id="app">
 
    <imgs-preload ref="imgs-preload" class="imgs-preload-wrap" :imgs="imgs" :preload-visible.sync="preloadVisible" :add-conditions-num="addConditionsNum" @imgsLoadedAll="imgsLoadedAll">
      <template #default="{ imgsPercentage }">{{ imgsPercentage }}%</template>
    </imgs-preload>
 
    <template v-if="!preloadVisible">
      loaded!
    </template>
  </main>
</template>
 
<script>
import imgs from '@/assets/imgs.json'// 可以把所有图片名称遍历到一个json文件
import ImgsPreload from 'vue-imgs-preload'
  
export default {
 
  name: 'App',
 
  components: {
    ImgsPreload
  },
 
  data() {
    return {
      preloadVisible: true,
      addConditionsNum: 1,// 影响预加载的因素个数，比如有一个异步接口
    }
  },
 
  computed: {
    imgs() {
      return imgs.map(item => require('@/assets/images/' + item));
    }
  },
  
  created() {
    this.init();
  },
  
  methods: {
    
    init() {
      setTimeout(() => {
        // this.addConditionsNum-- or this.$refs['imgs-preload'].imgsLoaded++
      }, 1000);
    },
    
    imgsLoadedAll() {
      // do sth...
    }
  }
}
</script>
 
<style>
#app { min-height: 100vh; }
.imgs-preload-wrap {
  background-image: radial-gradient(circle 248px at center, #16d9e3 0%, #30c7ec 47%, #46aef7 100%);
  color: #fff;
  font-size: .35rem;
}
</style>