Vue自定义指令完成白屏loading加载需求

需求背景:

        项目中图片资源过大，项目部署后压缩后首次加载也需要较长时间。这时候我们可以在该页面的mounted钩子中添加一个白屏覆盖住页面,然后添加loading，然后监听到所有图片加载完成后把白屏和loading去除。

用较低的带宽模拟

此时我们可以利用图片的onload 函数来判断当前图片是否加载完全 在vue的mounted钩子中对当前组件内所有的图片添加onload

export default {
  name: 'cxk',
  computed: {
    imgs: () => new Array(4).fill().map((_, i) => require(`@/assets/images/${i+1}.jpg`))
  },
  mounted() {
    const imgs = this.$el.querySelectorAll('img')
    const length = imgs.length
    let count = 0
    imgs.forEach(img => {
      img.onload = () => {
        count++
        console.log(count)
      }
    })
  }
}