目的: 图片预加载能够使得用户在浏览后续页面的时候,不会出现图片加载一半导致浏览不流畅的情况。
场景:在开发的过程中,我们经常会遇到这样的设计需求,当鼠标hover上去的时候,更改菜单的背景。如果没有进行图片预加载的话,会出现闪烁。那么拥有1px的眼睛的设计师们不会放过你的。为什么会出现这张情况?因为hover的时候,图片才会去加载。那么我们现在来解决这个问题。
首先我们要知道一点:如果图片在使用之前就已经请求过了,那么再次使用的时候,就不会再去请求(ps:图片路径一样)。下面讲实现方式:
一、方法一
项目打开的时候要对图片进行预加载,在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>
三、方法三
使用雪碧图:把hover的图片和原状态图片放一张图片处理(css sprites)。 用position来定位hover后的图片位置。
部分参考:https://blog.csdn.net/qq_34551390/article/details/100998562