承接上篇文章 new Image() 预加载 为什么比 直接加载要好?
下面是如何在 Vue 中实现图片预加载的一个简单小demo以及优化方案。
在 Vue 中实现图片预加载
1. 创建一个 Vue 组件
我们将创建一个 Vue 组件,并在其中使用 created
生命周期钩子来预加载图片。这里使用 new Image()
的方式来预加载图片。
2. 示例代码
<template>
<div>
<!-- 显示的图片 -->
<img :src="image1Src" alt="Image 1" />
</div>
</template>
<script>
export default {
data() {
return {
// 绑定到页面上的图片路径
image1Src: "img1.png",
};
},
created() {
this.preloadImage(this.image1Src); // 预加载图片
},
methods: {
// 预加载图片的方法
preloadImage(src) {
const img = new Image();
img.src = src;
img.onload = () => {
console.log('Image loaded:', src); // 图片加载完成后的回调
};
img.onerror = () => {
console.error('Failed to load image:', src); // 图片加载失败的回调
};
}
}
};
</script>
代码解析
当你设置 img.src = src
时,浏览器会开始按照提供的 src
路径去加载图片资源。这个过程包括:
- 请求:浏览器向服务器发送请求,获取图片文件。
- 加载:图片文件从服务器下载到浏览器的缓存。
- 渲染:浏览器在需要显示图片时,从缓存中加载并渲染它。
扩展:在 Vue 中预加载大量图片
如果你需要预加载大量图片,可以通过数组和循环来实现:
export default {
data() {
return {
images: [
'https://img1.png',
'https://img1.png',
'https://img2.png',
// 其他图片路径
]
};
},
created() {
this.preLoadimg()
},
methods: {
preLoadimg() {
let count = 0;
for (let img of this.imgs) {
let image = new Image();
image.src = img;
if (image.complete) {
console.log('图片已经在缓存中');
count++;
if (count === this.imgs.length) {
console.log('全部加载完成');
}
} else {
image.onload = () => {
count++;
if (count === this.imgs.length) {
console.log('全部加载完成');
}
};
}
}
}
}
};
优点
- 通过 Vue 组件的生命周期钩子来管理图片预加载,避免影响页面渲染。
- 使用
new Image()
创建的图片对象不会直接渲染到页面上,因此不会影响页面布局。 - 可以在组件创建时自动进行图片预加载,提升用户体验。
优化建议
当图片数量较多时,一次性预加载所有图片可能会影响性能,特别是对于移动设备或网络条件较差的用户。因此,可以结合懒加载(Lazy Loading)来提升用户体验。懒加载可以在图片进入视口(viewport)时才进行加载,从而提高初始页面加载速度和用户体验。
-
懒加载实现
-
使用loading="lazy"
-
或者通过以下步骤来实现图片的懒加载:
-
安装依赖:使用
Intersection Observer API
来检测图片是否进入视口。Vue 也有专门的懒加载库,如vue-lazyload
。 -
修改组件:在组件中使用懒加载逻辑。
-
-
Ps: 此处就不再写示例代码了,可以参考文档 IntersectionObserver
文档传送门
总结
在 Vue 中实现图片预加载是一个简单而高效的过程,通常会通过生命周期钩子函数(如 created
)来管理。你可以使用 new Image()
创建图片对象,设置其 src
属性来实现图片的预加载,减少后续访问时的等待时间。具体实现根据自己项目来写。