最近公司在做一个微信推广的H5，由于图片没有托管在CDN，所以首次打开H5页面图片加载会出现卡顿的情况，特别影响动画的效果。于是萌生了将所有图片预加载的想法，然后开始了Google的路程。。。初步实现的了预加载的效果，记录如下。
图片预加载的原理
实现图片的预加载，其实就是用js创建Image对象，然后绑定Image对象的src属性到图片路径，让其实现加载，这样图片就会加载到浏览器缓存，实现图片的预加载效果。
图片预加载实现
将所有要预加载的图片都放到vue目录结构的静态目录下
mulu.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>
实现效果如下图
example.png
