H5——监听页面图片加载完后，放开loading页面

思路：

给那些图片设置data-src=‘图片地址’属性 代替 src。然后写个公共文件处理逻辑：获取img标签的dom，把data-src的值赋给src，用onload方法判断图片加载完没。当所有图片都onload了。就可以放开loading了。

<template>
	<div>
	  页面样式自己写，
	   <slot></slot>  //记得带这个
   </div>
</template>
<script>
export default {
  name: 'Loading',
  data() {
    return {
      isShowLoading: true,  //控制显示
      attributes: [],
    };
  },
  mounted() {
    this.getDataSrc();
  },
  methods: {
  	//重复回调，onload 就是加载完了，就处理下一个dom
    setImg(i) {
      this.attributes[i].src = this.attributes[i].getAttribute('data-src');
      this.attributes[i].onload = () => {
        i++;
        if (i < this.attributes.length) {
          this.setImg(i);
        } else {
          this.isShowLoading = false;  //都onload完了就隐藏loading
        }
      };
    },
    getDataSrc() {
    //获取含有data-src的dom--push成数组
      let attributes = [...document.getElementsByTagName('img')];
      attributes.forEach(img => {
        if (img.getAttribute('data-src')) {
          this.attributes.push(img);
        }
      });
      let i = 0;
      this.setImg(i);
    },
  },
};