[JavaScript知识库]vue中的图片预加载

1.首先添加一个loading加载页，给一张加载的图片

  <div class="load" v-if="load">
    <img src="../assets/loding.gif" alt="" />
  </div>

2.  在data中添加一个开关，默认为false
   load: false, //加载

  3.loading加载的css样式
  // loading加载
  .load {
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0px;
    left: 0px;
    z-index: 999;
    background: #fff;
    img {
      position: absolute;
      width: 200px;
      height: 200px;
      top: 50%;
      left: 50%;
      margin-top: -100px;
      margin-left: -100px;
    }
  }

4.在axios请求数据渲染的页面中

```xml
<img :src="defaultCarList[index]" alt="" class="car" />

5.在create生命周期中，添加预加载的代码

 // 预加载的代码(上拉)
    for (var i = 0; i < 6; i++) {
      this.defaultCarList.push("http://www.ibugthree.com/default.gif");
    }

    this.list = await this.getCarList(); //方法调用

    //定义一个变量，用来保存图片的数量
    let loadNumber = 0;
    for (let i = 0; i < this.list.length; i++) {
      let oImg = new Image(); //实例化一下img，用来保存图片的
      oImg.onload = () => {
        loadNumber++; //让加载成功的图片数量统计
        if (loadNumber >= this.list.length) {
          this.load = false;（并且把loading加载页改成false）
          //判断图片加载成功的数量大于，数据中渲染的图片数量
          for (var i = 0; i < this.list.length; i++) {
            this.$set(
              this.defaultCarList,
              i,
              `http://www.ibugthree.com/${this.list[i].img_src}`
            );
          }
        }
      };
      oImg.src = `http://www.ibugthree.com/${this.list[i].img_src}`;
    }