vue图片预加载
2024-10-07 14:19:17
目的: 图片预加载能够使得用户在浏览后续页面的时候,不会出现图片加载一半导致浏览不流畅的情况。
一、方法一
项目打开的时候要对图片进行预加载,在App.vue里面的beforeCreate添加预加载程序
App.vue
beforeCreate(){
let count = 0;
let imgs = [
//用require的方式添加图片地址,直接添加图片地址的话,在build打包之后会查找不到图片,因为打包之后的图片名称会有一个加密的字符串
require('xxx')
]
for (let img of imgs) {
let image = new Image();
image.src = img;
image.onload = () => {
count++;
};
}
}
二、方法二
创建两个文件名称分别为imgPreloader.js以及imgPreloaderList.js,前者用于导出图片加载的异步方法imgPreloader,后者用于存放图片列表
然后在main.js里面,Vue对象创建之前,必须先把图片全部加载完才能创建Vue对象并且挂载到#app上
1.imgPreloaderList.js
export default [
require('相对图片地址1'),
require('相对图片地址2'),
...
];
2.imgPreloader.js
const imgPreloader = url => {
return new Promise((resolve, reject) => {
let image = new Image();
image.src = url;
image.onload = () => {
resolve();
};
image.onerror = () => {
reject();
};
});
};
export const imgsPreloader = imgs => {
let promiseArr = [];
imgs.forEach(element => {
promiseArr.push(imgPreloader(element));
});
return Promise.all(promiseArr);
};
3.main.js
// 导入图片预加载方法以及图片列表
import { imgsPreloader } from './config/imgPreloader.js';
import imgPreloaderList from './config/imgPreloaderList.js'; (async () => {
await imgsPreloader(imgPreloaderList);
//关闭加载弹框
document.querySelector('.loading').style.display = 'none';
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app');
})();
4.加载弹框
main.js提到加载弹框,那么这个弹框要加在哪里呢?答案是index.html
<style>
/*
*加载弹框的样式
*/
</style>
<body>
<div class="loading">
</div>
</body>
三、总结
方法二的效果较方法一更符合一般的需求,方法一可能图片还没完全加载完成,就执行beforeMount了。
最新文章
- rqt工具的使用
- 利用SSH传输文件
- atitit.TokenService v3 qb1 &#160;token服务模块的设计 新特性.docx
- Android-Activity使用(2) -传值
- div高度自适应(总结:min-height:100px; height:auto;的用法)
- JsRender实用教程(tag else使用、循环嵌套访问父级数据)
- Metronic 使用到的开源插件汇总
- GLib基础
- wpf窗体中复合控件焦点控制
- Ubuntu 14.04 登陆界面循环问题解决
- Android 字体修改,所有的细节都在这里 | 开篇
- InfluxDB安装和简介
- ES5-ES6-ES7_字符串与JOSN格式的数据相互转换以及深度克隆新对象
- Java第05次实验提纲(Java图形界面编程)
- code first 如何创建索引字段
- tomcat7配置
- RAID简介[zz]
- 关于python最大递归深度 - 998
- jenkins - svn: E170001报错的原因以及解决方案
- BZOJ 1305--[CQOI2009]dance跳舞(最大流)
热门文章
- Python---基础---循环,函数
- 使用vue进行国际化
- Task10.Bert
- jmeter接口测试与接口测试工具
- WORD 图片能粘到百度编辑器吗
- Codeforces 850A - Five Dimensional Points(暴力)
- 【HDOJ6614】AND Minimum Spanning Tree(签到)
- [CSP-S模拟测试]:sum(数学+莫队)
- Linux shell 归纳之 ~/. 是什么意思
- 2019牛客暑期多校训练营(第六场)C - Palindrome Mouse (回文自动机)