图片作为前端开发中不可或缺的元素，其加载速度对用户体验有着重要影响。然而，大量的图片加载不仅会消耗用户流量，还会导致页面加载缓慢，影响用户体验。为了解决这个问题，图片懒加载技术应运而生
图片懒加载（Lazy Loading）是一种优化网页性能的技术，它通过延迟加载图片，即在图片即将进入可视区域时才开始加载，从而减少页面初始加载时间，提高页面响应速度。
图片懒加载的实现原理主要基于以下几个关键点：
-
滚动事件监听： 图片懒加载的核心是通过监听浏览器的滚动事件（scroll事件）。当用户滚动页面时，会触发这个事件。
-
可视区域检测： 在滚动事件触发时，需要检测每个图片元素是否已经进入或即将进入浏览器的可视区域。这通常通过以下几种方法实现：
-
基于Element的getBoundingClientRect()方法：这个方法可以获取元素的位置和尺寸信息，通过计算元素相对于视口的位置，可以判断元素是否在可视区域内。
-
Intersection Observer API：这是一个现代的API，可以异步观察目标元素与其祖先元素或顶级文档视口的交叉状态。它提供了更加简洁和高效的方式来监听元素是否进入可视区域。
-
条件加载： 当检测到图片即将进入可视区域时，才开始加载这张图片。这样可以避免在页面初始加载时加载所有图片，从而减少初始加载时间和内存消耗。
-
资源替换： 在图片检测到即将进入可视区域时，使用JavaScript动态地将图片的src属性设置为实际的图片URL。如果使用占位符（如低分辨率图片或单色图片），则在加载完成后将其替换为实际的图片资源。
-
利用滚动事件监听 + getBoundingClientRect
原理： 图片dom 预先不设置src属性值，而新增自定义属性 wait-render值为true，初始化 预渲染3张，监听dom滚动事件，当到达可视范围域，开始加载图片 设置图片的 src 属性为实际图片 URL，并删除wait-render属性
使用vue3 实现，注意要点
- 滚动事件可用 @scroll监听
- 循环中的dom用ref的方式获取可以利用ref绑定一个方法，然后插入到数组中备用
- 初始化和后续监听中有重复逻辑 抽离公用设置图片setImg，参数为方法返回满足条件
1<template>
2 <div ref="scrollContainer" @scroll="lazyLoadImages" class="image-container">
3 <img :ref="getImg" v-for="(image, index) in images" :key="image" :wait-render="true" alt="图片" />
4 </div>
5</template>
6
7<script setup>
8import { ref } from 'vue';
9
10const scrollContainer = ref(null);
11
12const images = ref([
13 "http://e.hiphotos.baidu.com/image/pic/item/a1ec08fa513d2697e542494057fbb2fb4316d81e.jpg",
14 "http://c.hiphotos.baidu.com/image/pic/item/30adcbef76094b36de8a2fe5a1cc7cd98d109d99.jpg",
15 "http://h.hiphotos.baidu.com/image/pic/item/7c1ed21b0ef41bd5f2c2a9e953da81cb39db3d1d.jpg",
16 "http://g.hiphotos.baidu.com/image/pic/item/55e736d12f2eb938d5277fd5d0628535e5dd6f4a.jpg",
17 "http://e.hiphotos.baidu.com/image/pic/item/4e4a20a4462309f7e41f5cfe760e0cf3d6cad6ee.jpg",
18 "http://b.hiphotos.baidu.com/image/pic/item/9d82d158ccbf6c81b94575cfb93eb13533fa40a2.jpg",
19 "http://e.hiphotos.baidu.com/image/pic/item/4bed2e738bd4b31c1badd5a685d6277f9e2ff81e.jpg",
20 "http://g.hiphotos.baidu.com/image/pic/item/0d338744ebf81a4c87a3add4d52a6059252da61e.jpg",
21 "http://a.hiphotos.baidu.com/image/pic/item/f2deb48f8c5494ee5080c8142ff5e0fe99257e19.jpg",
22 "http://f.hiphotos.baidu.com/image/pic/item/4034970a304e251f503521f5a586c9177e3e53f9.jpg",
23 "http://b.hiphotos.baidu.com/image/pic/item/279759ee3d6d55fbb3586c0168224f4a20a4dd7e.jpg",
24 "http://a.hiphotos.baidu.com/image/pic/item/e824b899a9014c087eb617650e7b02087af4f464.jpg",
25 "http://c.hiphotos.baidu.com/image/pic/item/9c16fdfaaf51f3de1e296fa390eef01f3b29795a.jpg",
26 "http://d.hiphotos.baidu.com/image/pic/item/b58f8c5494eef01f119945cbe2fe9925bc317d2a.jpg",
27 "http://h.hiphotos.baidu.com/image/pic/item/902397dda144ad340668b847d4a20cf430ad851e.jpg",
28 "http://b.hiphotos.baidu.com/image/pic/item/359b033b5bb5c9ea5c0e3c23d139b6003bf3b374.jpg",
29 "http://a.hiphotos.baidu.com/image/pic/item/8d5494eef01f3a292d2472199d25bc315d607c7c.jpg",
30 "http://b.hiphotos.baidu.com/image/pic/item/e824b899a9014c08878b2c4c0e7b02087af4f4a3.jpg",
31 "http://g.hiphotos.baidu.com/image/pic/item/6d81800a19d8bc3e770bd00d868ba61ea9d345f2.jpg",
32]);
33let refImgs = ref([])
34
35function getImg (el) {
36 console.log('el', el)
37 if (el) {
38 refImgs.value.push(el)
39 }
40}
41
42const lazyLoadImages = () => {
43
44 const windowHeight = window.innerHeight;
45
46 setImg((image, index) => {
47 let img = refImgs.value[index]
48 if(!img.getAttribute('wait-render')){
49 return false
50 }
51
52 const imgTop = img.getBoundingClientRect().top;
53 if (imgTop >= windowHeight){
54 return false
55 }
56
57
58 return true
59 })
60};
61
62const setImg = (func = () => { }) => {
63 images.value.forEach((image, index) => {
64 if (func(image, index)) {
65 const img = refImgs.value[index]
66 img.src = image;
67
68 img.removeAttribute('wait-render');
69 }
70 })
71}
72onMounted(() => {
73 setImg((image, index) => {
74 return index < 3
75 })
76});
77onUnmounted(() => {
78});
79</script>
80
81<style>
82.image-container {
83 width: 100%;
84 height: 100vh;
85 overflow: hidden;
86 overflow-y: scroll;
87}
88
89img {
90 width: 100%;
91 display: block;
92 margin-bottom: 20px;
93}
94</style>
效果展示
Intersection Observer
从上图中滚动到加载图片的效果分析，看起来并不怎么丝滑，加载时机也不是很准确，以下是优化分析
- 1.当前代码中，图片加载是按顺序进行的，这可能导致滚动到页面的底部时，页面加载速度变慢。可以考虑使用异步加载或分批加载图片，以提高用户体验。使用Intersection Observer API代替手动计算图片位置，这样可以更精确地控制图片加载时机。
- 2.refImgs数组用于存储图片DOM元素的引用，但这个数组并不需要响应式。可以将它改为普通的JavaScript数组。（这个确实，所以考虑连这个refImgs变量声明都省了，直接用父级节点来获取子集scrollContainer.children）
修改之前 先了解下 Intersection Observer这个api
Intersection Observer API
它一个现代浏览器的API，用于异步观察目标元素与其祖先元素或顶级文档视窗（viewport）交叉状态的变化。这个API允许开发者在不使用轮询（polling）的情况下，高效地检测元素是否进入、离开或部分进入视窗。
1.基本概念
- 目标元素（Target Element）：想要观察的元素。
- 祖先元素（Ancestor Element）：目标元素的父元素或更上层的元素，或者是整个文档。
- 视窗（Viewport）：浏览器窗口的可见部分。
2.事件
-
当目标元素与视窗交叉的状态发生变化时，会触发回调函数。以下是可能发生的事件：
-
进入视窗（Enter the viewport）：目标元素首次进入视窗。
-
离开视窗（Leave the viewport）：目标元素完全离开视窗。
-
部分进入视窗（Partially enter the viewport）：目标元素部分进入视窗。
3.使用方法
以下是一个简单的Intersection Observer API的使用示例：
1
2let observer = new IntersectionObserver((entries, observer) => {
3 entries.forEach(entry => {
4
5 if (entry.isIntersecting) {
6 console.log('元素已进入视窗');
7
8 } else {
9 console.log('元素已离开视窗');
10
11 }
12 });
13}, {
14
15 threshold: 0.5
16});
17
18
19observer.observe(document.getElementById('target-element'));
20
21
22
开始改造
下面利用 Intersection Observer改造后的完整代码
注意 图片要给个默认高度来撑开父级元素，否则初始化的时候图 都堆积在一起， 所以Intersection Observer会判定在可视窗口内的img 造成过度加载。就达不到想要的效果了
1<template>
2 <div ref="scrollContainer" class="image-container">
3 <img v-for="(image, index) in images" :key="index" :data-src="image" alt="图片" />
4 </div>
5</template>
6
7<script setup>
8import { ref } from 'vue';
9
10const images = ref([
11 "http://e.hiphotos.baidu.com/image/pic/item/a1ec08fa513d2697e542494057fbb2fb4316d81e.jpg",
12 "http://c.hiphotos.baidu.com/image/pic/item/30adcbef76094b36de8a2fe5a1cc7cd98d109d99.jpg",
13 "http://h.hiphotos.baidu.com/image/pic/item/7c1ed21b0ef41bd5f2c2a9e953da81cb39db3d1d.jpg",
14 "http://g.hiphotos.baidu.com/image/pic/item/55e736d12f2eb938d5277fd5d0628535e5dd6f4a.jpg",
15 "http://e.hiphotos.baidu.com/image/pic/item/4e4a20a4462309f7e41f5cfe760e0cf3d6cad6ee.jpg",
16 "http://b.hiphotos.baidu.com/image/pic/item/9d82d158ccbf6c81b94575cfb93eb13533fa40a2.jpg",
17 "http://e.hiphotos.baidu.com/image/pic/item/4bed2e738bd4b31c1badd5a685d6277f9e2ff81e.jpg",
18 "http://g.hiphotos.baidu.com/image/pic/item/0d338744ebf81a4c87a3add4d52a6059252da61e.jpg",
19 "http://a.hiphotos.baidu.com/image/pic/item/f2deb48f8c5494ee5080c8142ff5e0fe99257e19.jpg",
20 "http://f.hiphotos.baidu.com/image/pic/item/4034970a304e251f503521f5a586c9177e3e53f9.jpg",
21 "http://b.hiphotos.baidu.com/image/pic/item/279759ee3d6d55fbb3586c0168224f4a20a4dd7e.jpg",
22 "http://a.hiphotos.baidu.com/image/pic/item/e824b899a9014c087eb617650e7b02087af4f464.jpg",
23 "http://c.hiphotos.baidu.com/image/pic/item/9c16fdfaaf51f3de1e296fa390eef01f3b29795a.jpg",
24 "http://d.hiphotos.baidu.com/image/pic/item/b58f8c5494eef01f119945cbe2fe9925bc317d2a.jpg",
25 "http://h.hiphotos.baidu.com/image/pic/item/902397dda144ad340668b847d4a20cf430ad851e.jpg",
26 "http://b.hiphotos.baidu.com/image/pic/item/359b033b5bb5c9ea5c0e3c23d139b6003bf3b374.jpg",
27 "http://a.hiphotos.baidu.com/image/pic/item/8d5494eef01f3a292d2472199d25bc315d607c7c.jpg",
28 "http://b.hiphotos.baidu.com/image/pic/item/e824b899a9014c08878b2c4c0e7b02087af4f4a3.jpg",
29 "http://g.hiphotos.baidu.com/image/pic/item/6d81800a19d8bc3e770bd00d868ba61ea9d345f2.jpg",
30]);
31const scrollContainer = ref(null);
32
33
34let observer = null;
35
36
37function loadImage(imageElement) {
38
39 const src = imageElement.dataset.src;
40 if (src) {
41 imageElement.src = src;
42 imageElement.removeAttribute('data-src');
43 }
44}
45
46
47 * @param {Function} entries 一个数组，包含每个被观察元素的交叉信息。
48 * @param {Number} observer IntersectionObserver 实例本身。
49 */
50const observerCallback = (entries, observer) => {
51 entries.forEach(entry => {
52 if (entry.isIntersecting) {
53 loadImage(entry.target);
54 observer.unobserve(entry.target);
55 }
56 });
57};
58
59onMounted(() => {
60
61 observer = new IntersectionObserver(observerCallback, {
62 root: scrollContainer.value,
63 threshold: 0.1
64 });
65
66 images.value.forEach((image, index) => {
67 const imgElement = scrollContainer.value.children[index];
68 observer.observe(imgElement);
69 });
70});
71
72onUnmounted(() => {
73 if (observer) {
74 observer.disconnect();
75 }
76});
77
78</script>
79
80<style>
81.image-container {
82 width: 100%;
83 height: 100vh;
84 overflow: hidden;
85 overflow-y: scroll;
86}
87
88img {
89 width: 100%;
90 height: 500px;
91 display: block;
92 margin-bottom: 20px;
93 object-fit: cover;
94}
95</style>
效果图
这样看起来就丝滑多了，加载时机也很准确，但每次使用 都要写这么多逻辑是不是很繁琐，用起来也不是很方便，能不能封装起来，让使用更加简洁和减少代码量书写呢，其实可以，而且不用重复造轮子，已经有成熟的组件库了，下面说一下 vue3-lazyload
vue3-lazyload
vue3-lazyload 是一个基于 Vue 3 的懒加载组件，它允许你延迟加载图片、视频或其他资源，直到它们接近或进入视口（用户可见的区域）。
这个组件库 能实现和 Intersection Observer一样的效果，而且使用非常方便，并且已经内置了加载逻辑，让代码看起来简洁很多
安装 vue3-lazyload
1npm install vue3-lazyload
全局注册
1<!--main.js-->
2...
3import Lazyload from "vue3-lazyload";
4
5const app = createApp(App)
6
7app.use(Lazyload, {
8 loading: "@/assets/img/default.png",
9 error: "@/assets/img/error.png",
10});
11...
使用完整案例
1<template>
2 <div class="image-container">
3 <template v-for="(url, index) in images" :key="index">
4 <img class="img" v-lazy="url" alt="图片" />
5 </template>
6 </div>
7</template>
8
9<script setup>
10import { ref } from 'vue';
11
12const images = ref([
13 "http://e.hiphotos.baidu.com/image/pic/item/a1ec08fa513d2697e542494057fbb2fb4316d81e.jpg",
14 "http://c.hiphotos.baidu.com/image/pic/item/30adcbef76094b36de8a2fe5a1cc7cd98d109d99.jpg",
15 "http://h.hiphotos.baidu.com/image/pic/item/7c1ed21b0ef41bd5f2c2a9e953da81cb39db3d1d.jpg",
16 "http://g.hiphotos.baidu.com/image/pic/item/55e736d12f2eb938d5277fd5d0628535e5dd6f4a.jpg",
17 "http://e.hiphotos.baidu.com/image/pic/item/4e4a20a4462309f7e41f5cfe760e0cf3d6cad6ee.jpg",
18 "http://b.hiphotos.baidu.com/image/pic/item/9d82d158ccbf6c81b94575cfb93eb13533fa40a2.jpg",
19 "http://e.hiphotos.baidu.com/image/pic/item/4bed2e738bd4b31c1badd5a685d6277f9e2ff81e.jpg",
20 "http://g.hiphotos.baidu.com/image/pic/item/0d338744ebf81a4c87a3add4d52a6059252da61e.jpg",
21 "http://a.hiphotos.baidu.com/image/pic/item/f2deb48f8c5494ee5080c8142ff5e0fe99257e19.jpg",
22 "http://f.hiphotos.baidu.com/image/pic/item/4034970a304e251f503521f5a586c9177e3e53f9.jpg",
23 "http://b.hiphotos.baidu.com/image/pic/item/279759ee3d6d55fbb3586c0168224f4a20a4dd7e.jpg",
24 "http://a.hiphotos.baidu.com/image/pic/item/e824b899a9014c087eb617650e7b02087af4f464.jpg",
25 "http://c.hiphotos.baidu.com/image/pic/item/9c16fdfaaf51f3de1e296fa390eef01f3b29795a.jpg",
26 "http://d.hiphotos.baidu.com/image/pic/item/b58f8c5494eef01f119945cbe2fe9925bc317d2a.jpg",
27 "http://h.hiphotos.baidu.com/image/pic/item/902397dda144ad340668b847d4a20cf430ad851e.jpg",
28 "http://b.hiphotos.baidu.com/image/pic/item/359b033b5bb5c9ea5c0e3c23d139b6003bf3b374.jpg",
29 "http://a.hiphotos.baidu.com/image/pic/item/8d5494eef01f3a292d2472199d25bc315d607c7c.jpg",
30 "http://b.hiphotos.baidu.com/image/pic/item/e824b899a9014c08878b2c4c0e7b02087af4f4a3.jpg",
31 "http://g.hiphotos.baidu.com/image/pic/item/6d81800a19d8bc3e770bd00d868ba61ea9d345f2.jpg",
32]);
33
34
35</script>
36
37<style>
38.image-container {
39 width: 100%;
40 overflow: hidden;
41 overflow-y: scroll;
42}
43
44.img {
45 width: 100%;
46 height: 500px;
47 display: block;
48 margin-bottom: 20px;
49 object-fit: cover;
50}
51</style>
个人笔记记录 2021 ~ 2025