页面中想把图片都加载完成之后在显示页面
进度条使用vant,Progress
<template>
<div class="initial-progress">
<van-progress
:pivot-text="''"
stroke-width="8px"
color="#3873FA"
track-color="#DEEBFF"
:percentage="percentage"
/>
<div class="proNum">{{ percentage }}%</div>
</div>
</template>
<script>
export default {
data() {
return {
percentage:0,
count: 0,
};
},
watch: {
percentage: function (val) {
// 图片加载完成
if (val === 100) {
}
},
},
mounted() {
this.loadPercentage()
},
methods: {
//图片预加载,加载出进度条
loadPercentage() {
let imgs = [
"@img/img1.png",
"@img/img2.png",
"@img/img3.png",
"@img/img4.png",
"@img/img5.png",
"@img/img6.png",
"@img/img7.png",
"@img/img8.png",
"@img/img9.png",
"@img/img10.png",
];
for (let img of imgs) {
let image = new Image();
image.src = img;
image.onload = () => {
this.count++;
let percentNum = Math.floor((this.count / imgs.length) * 100);
this.percentage = percentNum;
};
}
}
},
};
</script>