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

图片预加载实现

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

微信图片_20190422115412.png

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

<script>
export default {
  data () {
    return {
      count: 0,
    }
  },
  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++
        }
      }

    },
  },
}
</script>

preload()方法中先将所有要加载的图片路径放到一个数组中，然后遍历数组中的每个图片路径，创建Image对象，将图片的路径绑定到image.src，实现图片加载，然后在图片加载的onload回调中记录图片加载的数量count，用作实现图片资源加载百分比的计算。

加载百分比实现

添加watch属性监听已经加载的图片的数量count，当count的数量等于图片的总数量时说明加载完成，而当前加载的百分比为count/sum，其中sum为图片的总数量。具体实现代码如下

<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: 'cover'})
      }
    }
  }
}
</script>

微信图片_20190422115806.png