vue页面加载完毕执行的方法,vue 加载html静态页面
这篇文章主要为大家详细介绍了使用某视频剪辑软件实现加载页，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了用某视频剪辑软件实现加载页的具体代码，供大家参考，具体内容如下
模板
div class= BAC style= height:1024 px；显示器：flex对齐-项目：居中；对齐-内容：居中；
div class="包装内容"
img class=logo src=././资产/img/徽标。 png :style= { margin-left :percent }
div class=bar
div:style= { width:percent } class= loading bar
/div
/div
div class= percent font " { percent } }/div
div class=fontTitle 报告生成中./div
/div
/div
/模板
脚本
导出默认值{
名称：正在加载，
data() {
返回{
计数：0,
百分比："0",
毕业生
要求( @/assets/img/bg.png )，
要求( @/assets/img/icon1.png )，
要求( @/assets/img/icon2.png )，
要求( @/assets/img/icon3.png )，
要求( @/assets/img/icon4.png )，
要求( @/assets/img/icon5.png )，
要求( @/assets/img/icon6.png )，
要求( @/assets/img/loading-bg.png )，
要求( @/assets/img/logo.png )，
要求( @/assets/img/page3-title.png )，
要求( @/assets/img/pic1.png )，
要求( @/assets/img/pic2.png )，
需要( @/assets/img/pic3.png )
)
]
}
},
已安装(){
这个。preload()；
},
观察：{
计数：函数（值){
if ( val===this.imgs.length) {
//图片加载完成后跳转页面
console.log(准备就绪，val)
这个. router.push({path: index})
}
}
},
方法：{
预加载：函数(){
for (let img of this.imgs) {
让图像=新图像()
image.src=img
image.onload=()={
这个。计数
//计算图片加载的百分数，绑定到百分比变量
假设百分比数字=数学。地板(这个。数数/这个。imgs。长度* 100)
if (percentNum==100) {
percentNum=99
}
this.percent=`${percentNum}% `
}
}
}
}
}
/脚本
样式范围。bac {
宽度：100%;
背景：url(././assets/img/loading-bg.png )不重复右上；
背景尺寸：100% 100%;
溢出：隐藏；
位置：相对；
}。徽标{
宽度：98px
高度：98px
}。百分比字体{
字体大小：32px
颜色：# 046353;
字母间距：0.84像素
文本对齐：居中；
边距-顶部：32px
}。酒吧
边距-顶部：50px
宽度：300像素
高度：8px
不透明度：0.8;
背景：# FFFFFF
边框-半径：4px
}。加载栏{
高度：8px
背景图像：线性渐变(-47度，#046353 0%,# 046353 100%);
边框-半径：4px
}。fontTitle {
边距-顶部：12px
字体大小：32px
颜色：# 046353;
字母间距：0.84像素
文本对齐：居中；
字体粗细：400;
}
/风格
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。