Vue实现图片预加载

<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>

加载百分比实现
<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>

https://www.jianshu.com/p/1618cb183d28

转载于:https://www.cnblogs.com/shy1766IT/p/11247979.html