vue项目中使用大图片提前预加载处理方案
目的： 图片预加载能够使得用户在浏览后续页面的时候，不会出现图片加载一半导致浏览不流畅的情况。
方案一
项目打开的时候要对图片进行预加载，在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.onload = () => {
count++;
};
image.src = img;
}
}方案二
创建两个文件名称分别为imgPreloader.js以及imgPreloaderList.js，前者用于导出图片加载的异步方法imgPreloader，后者用于存放图片列表
然后在main.js里面，Vue对象创建之前，必须先把图片全部加载完才能创建Vue对象并且挂载到#app上
imgPreloaderList.js
export default [
require('相对图片地址1'),
require('相对图片地址2'),
...
];imgPreloader.js
const imgPreloader = url => {
return new Promise((resolve, reject) => {
let image = new Image();
image.onload = () => {
resolve();
};
image.onerror = () => {
reject();
};
image.src = url;
});
};
export const imgsPreloader = imgs => {
let promiseArr = [];
imgs.forEach(element => {
promiseArr.push(imgPreloader(element));
});
return Promise.all(promiseArr);
};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');
})();加载弹框
main.js提到加载弹框，那么这个弹框要加在哪里呢？答案是index.html
<style>
/*
*加载弹框的样式
*/
</style>
<body>
<div class="loading">
</div>
</body>方案三
根据前面的思路，我在别人开发的基础上，根据平时的业务需求，加上了一些功能【如：加载进度条到百分之百至少所需消耗的时间】，封装了一个组件
本文来自博客园，作者：JackieDYH，转载请注明原文链接：https://www.cnblogs.com/JackieDYH/p/17634425.html
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型，支持深度思考和联网搜索！
· 25岁的心里话
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· ollama系列01：轻松3步本地部署deepseek，普通电脑可用
· 按钮权限的设计及实现