vue-imgs-preload

一个简单的图片预加载组件，提供简单的百分比预加载页面

Install

npm i vue-imgs-preload

Options

props：

Property	description	type	default
imgs	需要预加载的图片数组	Array	/
preloadVisible	预加载页面的显示隐藏，一般配合.sync使用	Boolean	/
addConditionsNum	对预加载有影响的因素个数	Number	0

Events：

method	description
imgsLoadedAll	所有图片预加载成功后的事件

Usage

imgsPercentage到100后的默认事件是preloadVisible = false

App.vue：

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