Vue实现图片全部预加载
最近公司在做一个微信推广的H5，由于图片没有托管在CDN，所以首次打开H5页面图片加载会出现卡顿的情况，特别影响动画的效果。于是萌生了将所有图片预加载的想法，然后开始了Google的路程。。。初步实现的了预加载的效果，记录如下，react也可参照此方式

图片预加载的原理

实现图片的预加载，其实就是用js创建Image对象，然后绑定Image对象的src属性到图片路径，让其实现加载，这样图片就会加载到浏览器缓存，实现图片的预加载效果。

图片预加载实现

将所有要预加载的图片都放到vue目录结构的静态目录下

项目中引用的图片都直接引用静态目录下的图片，如果图片放到src\assets目录下，项目中引用图片的相对路径，在vue打包的时候会改变图片的引用名称，这样就无法实现图片预加载的效果
创建loading.vue文件，编写preload()方法

<template>
  <div class="page-container" style="text-align: center;">
    <div id="loading-panel">
      <h1><strong>Loading...</strong></h1>
      <h2><strong>{{percent}}</strong></h2>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      count: 0,
      percent: '',
    }
  },
  mounted: function() {
    this.preload()
  },
  methods: {
    preload: function() {
      let imgs = [
        "static/img/back.gif",
        "static/img/correct.png",
        "static/img/cover.gif",
        "static/img/errExpress.png",
        "static/img/error.png",
        "static/img/ply.png",
        "static/img/q1.png",
        "static/img/q1a.png",
        "static/img/q1b.png",
        "static/img/q1c.png",
        "static/img/q1d.png",
        "static/img/share.png",
        "static/img/start.png",
        "static/img/stop.png"
      ]

      for (let img of imgs) {
        let image = new Image()
        image.src = img
        image.onload = () => {
          this.count++
          // 计算图片加载的百分数，绑定到percent变量
          let percentNum = Math.floor(this.count / 14 * 100)
          this.percent = `${percentNum}%`
        }
      }
    },

  },

  watch: {
    count: function(val) {
      // console.log(val)
      if (val === 14) {
        // 图片加载完成后跳转页面
        this.$router.push({path: 'index'})
      }
    }
  }
}
</script>