前景：先来说一下图片预加载跟图片懒加载有什么区别：

1.图片懒加载：相对于项目中的图片因为网络原因加载太慢，那么用户第一眼看到呢可能就是页面图片空白然后图片从上到下慢慢悠悠的加载出来，这个时候自定义化包括图片组件化会在加载的过程中先给出一个默认图进行显示，当我们项目中要显示的图片加载完成之后在替换掉默认显示的懒加载图片，这是一种情况，第二种情况呢就是图片加载异常显示一个默认图，处理逻辑一样，区分一下图片加载中还是图片加载完成异常的情况插入默认图就好了。

2.图片预加载：相对于这种情况呢，就是可能在很多活动H5或者APP中会遇到，项目中存在多张背景图以及很多大图，甚至还有根据状态动态替换背景图大图等等效果，总之可以说整个项目完全就是图片叠加呈现出来的效果吧。那么在这种·情况在进入页面之前就需要吧图片提前预加载完成这样的话无论跳转进入哪一个页面，图片都不会出现空白或者加载慢的情况，但是有个弊端就是所有图片都在首页加载，所以首屏速度会受影响，，可以有个过渡页或者其他页面先吸引用户其次往后走，这块需求就看产品怎么定义了。

所以本地图片预加载，动态接口返回的数据懒加载，这样可以提高用户体验

<template>
<!-- 过渡页最外层 -->
  <div class="Home">
    <div class="loadingBox">
      <!-- 加载进度条 -->
      <div class="loading">
        <div>{{ percent }}</div>
       <!-- 底部背景图 -->
        <img src="../assets/home/dot.gif" alt="" />
      </div>
      <!-- logo -->
      <div class="logo">
        <img src="../assets/home/logo.png" alt="" />
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "index",
  data() {
    return {
      // 预加载已完成的图片数量
      count: 0,
      // 进度条百分比%
      percent: "",
      // 图片总数据
      allList: [],
    };
  },
  /**
   * watch监听图片预加载完成的数量
   * 首先可能会疑惑这里的108数字是什么意思，
   * 这个是我项目中需要预加载的图片总数量，
   * 可能会有小伙伴产生疑问为什么写死不写活儿，{这里为嘛不取allList总数据的长度呢}，
   * 因为监听的时候可能图片没有加载完就会执行进入，所以先写死，有较好的方法可以@博主
   */
  watch: {
    // 监听Data中的count
    count: function (val) {
      if (val === 108) {
        // 图片加载完成后跳转页面
        this.$router.push("/home");
      }
    },
  },
  methods: {
    /**
     * imgLoad 图片全局预加载
     *
     * require.context 查找指定目录文件中的文件/图片
     * @param{1：文件地址}
     * @param{2：是否查找子目录}
     * @param{3：正则过滤}
     */
    imgLoad() {
      /**
       * 循环查找指定目录文件的图片
       * @param{注意}这里由于同时是分模块开发的目录结构，
       * 统一的话需要更改所有模块下的图片路径地址
       * 所以检索图片文件就多次一举了，正常预加载
       * 的图片统一放在一个文件夹下的目录就可以
       */
      let chooseEat = require.context(
        "../assets/chooseEat",
        false,
        /\.gif|png$/
      );
      let end = require.context("../assets/end", false, /\.gif|png$/);
      let home = require.context("../assets/home", false, /\.gif|png$/);
      let lamp = require.context("../assets/lamp", false, /\.gif|png$/);
      // chooseEat文件夹图片
      let chooseEatList = [];
      // end文件夹图片
      let endList = [];
      // home文件夹图片
      let homeList = [];
      // lamp文件夹图片
      let lampList = [];
      // 总数据
      let allList = [];
      for (var i = 0; i < chooseEat.keys().length; i++) {
        chooseEatList.push({
          id: 1,
          img: chooseEat.keys()[i].substr(2, chooseEat.keys()[i].length),
        });
      }
      for (var j = 0; j < end.keys().length; j++) {
        endList.push({
          id: 2,
          img: end.keys()[j].substr(2, end.keys()[j].length),
        });
      }
      for (var k = 0; k < home.keys().length; k++) {
        homeList.push({
          id: 3,
          img: home.keys()[k].substr(2, home.keys()[k].length),
        });
      }
      for (var p = 0; p < lamp.keys().length; p++) {
        lampList.push({
          id: 4,
          img: lamp.keys()[p].substr(2, lamp.keys()[p].length),
        });
      }
      allList =chooseEatList.concat(endList,homeList,lampList);
      // 合并数据
      // 根据层级追加目录路径前缀 1chooseEat 2end 3home 4lamp
      this.allList = allList;
      for (var b in allList) {
        var image = new Image();
          if (allList[b].id === 1) {
          image.src= require("../assets/chooseEat/" + allList[b].img);
        } else if (allList[b].id === 2) {
         image.src = require("../assets/end/" + allList[b].img);
        } else if (allList[b].id === 3) {
         image.src = require("../assets/home/" + allList[b].img);
        } else if (allList[b].id === 4) {
        image.src = require("../assets/lamp/" + allList[b].img);
        }
        // 图片加载
         image.onload = () => {
          this.count++;
          // 计算图片加载的百分数，绑定到percent变量
          let percentNum = Math.floor((this.count / 108) * 100);
          this.percent = `${percentNum}%`;
        };
      }
    },
  },
  mounted() {
    // 调用图片预加载方法
    this.imgLoad();
  },
};
</script>
<style scoped>
.Home {
  width: 100%;
  min-height: 100vh;
  position: relative;
  background: url(../assets/home/homeBgc.png) no-repeat;
  background-size: 100%;
}
.loading {
  position: relative;
  top: 260px;
  font-size: 12px;
  color: #fff;
  text-align: center;
}
.loading img {
  width: 50px;
  margin-top: 10px;
}
.logo {
  position: absolute;
  width: 100%;
  text-align: center;
  bottom: 95px;
}
.logo img {
  width: 147px;
  height: 51px;
  visibility: visible !important;
}
</style>

 预加载中效果:

预加载完成跳转到指定页面效果：