vue等待所有图片或背景图片加载完成后再显示组件 关闭加载动画

由于网页加载图片的时候 会一块块的显示,有闪烁感,不是很美观,想实现  在图片加载完毕后再显示组件

一开始想到的是使用onload事件:

window.onload = () => {
  console.log("加载完成");
do something...........
};

但是 发现这样只会在 网页首次加载(刷新页面)的时候生效, vue 路由切换页面的时候,只会修改局部dom,页面不会触发onload事件....

首先  要在dom加载完成后 进行操作 需要在updated生命周期,我刚开始是在mounted生命周期里,但是 遇到获取不到dom 的问题，mounted生命周期里只能使用setTimeOut来实现,

原因是：dom动态属性是在页面动态属性挂载完成才赋值的，mounted是在dom节点挂载完执行的，这时候动态属性并没有赋值。而在赋值的一瞬间 updated生命周期就监听到了。

实现步骤:

1.获取 网页中的图片标签集合

2.声明一个变量imgLoad 用于表示 加载完成的图片的数量

3.遍历图片集合

4.当图片加载完成会触发onload事件 触发时imgLoad+1

5.当 加载完成的图片数量等于 图片标签的数量时 关闭加载动画 显示页面组件

6.容错：如果某一张图片加载失败  会导致页面始终无法显示  所以加一个setTimeOut   5秒后  强制展示页面组件

注意 ：组件的包裹层要用v-show="display" 而不是 v-if="display"   ，因为display 默认false， 用v-if 的话这个组件根本没有创建

 updated() {
      let imgList = document.getElementsByTagName('img');//图片集合
      let imgCount = imgList.length;//图片总数
      let imgLoad = 0;//加载完成的图片数量

      for (let i = 0; i < imgCount; i++) {
        imgList[i].onload = () => {
          imgLoad++;
          console.log(imgLoad);
          if (imgLoad === imgCount) {
            this.loading =false;
            this.display = true;
            console.log("图片加载完成 展示组件");
          }
        }
      }

      setTimeout(() => {
        if (!this.display) {
          this.loading =false;
          this.display = !this.display;
          console.log("超时 强制显示");
        }
      }, 5000)

    }

需要等待背景图片加载完显示的话   也是类似,例子:

const bg = new Image();
bg.src = require('../../assets/other-img/2.jpg');
bg.onload = () => {
console.log("背景图片加载好了")
}