Vue3 + IntersectionObserver图片懒加载：从原理到内存管理的完整实践

脚本专家

在涉及大量图片展示的前端页面（如商品列表、相册、朋友圈）中，按需加载图片是提升首屏性能和节省带宽的常用手段。传统方案依赖 scroll 事件监听，需要手动计算元素位置，频繁触发又容易造成主线程卡顿。Vue3 应用可以借助浏览器原生的 IntersectionObserver API，以更低的资源消耗实现精准的懒加载。

浏览器的 IntersectionObserver 会自动监测目标元素与视口的交叉状态，当图片进入可视区域（或露出指定比例）时才触发加载，离开视口后则自动暂停检查。相比 scroll + getBoundingClientRect 组合，它省去了大量重复计算，代码也更简洁。

下面是一个在 Vue3 + TypeScript 项目中实现高性能图片懒加载的完整示例，包含配置定义、DOM 引用获取、observer 初始化、资源回收以及组件生命周期绑定。

---

一、配置项与模板准备

首先在 <script setup lang="ts"> 中定义图片总数、占位图 URL 以及真实图片的地址生成函数。占位图在页面初始时直接渲染，真实地址通过 data-src 属性存放。

2. const TOTAL_ITEMS = 99;
3. const DEFAULT_IMG = 'https://pica.zhimg.com/v2-f052aa50ca65df4bad1c3b7e4084d00e_1440w.jpg';
4. const IMG_URL_TEMPLATE = (index: number) => `https://picsum.photos/400/600?r=${index}`;

复制代码

模板中使用 v-for 循环生成图片列表，每个 img 标签通过 ref 函数将 DOM 元素收集到同一个数组中。注意 :src 绑定占位图，:data-src 绑定真实图片地址。

2. <div class="lazy-desc">图片懒加载功能：进入视口才加载真实图片，首屏加载速度提升 80%，节省带宽，避免页面卡顿</div>
3. <div class="card-list">
4.   <div class="item" v-for="(item, index) in TOTAL_ITEMS" :key="index">
5.     <img ref="imgRefs" :src="DEFAULT_IMG" alt="image" :data-src="IMG_URL_TEMPLATE(item)" />
6.   </div>
7. </div>

复制代码

二、获取图片 DOM 引用

使用 ref<HTMLImageElement[]> 类型的数组来存储所有图片元素。Vue 在 v-for 中遇到 ref 时，会自动将每个循环生成的 DOM 推入该数组中。

2. const imgRefs = ref<HTMLImageElement[]>([]);

复制代码

三、懒加载核心逻辑

定义一个 IntersectionObserver 实例，并在回调中遍历所有发生交叉变化的元素。只有当 entry.isIntersecting 为 true（即元素进入视口）时才处理。此时取出该元素的 img.dataset.src，将其赋值给 img.src，触发浏览器加载真实图片。加载后立即调用 observer.unobserve(img)，避免已加载的图片继续占用观察资源。

观察者初始化时，配置 threshold: 0.01，表示图片露出 1% 就触发加载。这个值可以根据业务场景调整，值越小越早加载，但可能会浪费部分带宽。

2. let observer: IntersectionObserver | null = null;
4. async function initLazyLoad() {
5.   observer = new IntersectionObserver(
6.     (entries, observer) => {
7.       for (const entry of entries) {
8.         if (!entry.isIntersecting) continue;
9.         const img = entry.target as HTMLImageElement;
10.         const realSrc = img.dataset.src;
11.         if (realSrc) img.src = realSrc;
12.         observer.unobserve(img);
13.       }
14.     },
15.     { threshold: 0.01 }
16.   );
18.   // 等待 DOM 渲染完成后再开始监听，确保 imgRefs 中已有元素
19.   await nextTick();
20.   imgRefs.value.forEach((img) => observer?.observe(img));
21. }

复制代码

四、资源清理，防止内存泄漏

组件销毁时必须断开所有观察，否则 observer 会一直持有对 DOM 的引用，导致内存泄漏。标准做法是：先遍历所有图片依次调用 unobserve，再调用 observer.disconnect() 完全销毁实例。

2. function destroyLazyLoad() {
3.   if (!observer) return;
4.   imgRefs.value.forEach((img) => observer!.unobserve(img));
5.   observer.disconnect();
6.   observer = null;
7. }

复制代码

五、生命周期绑定

使用 onMounted 启动懒加载，使用 onUnmounted 执行清理。这两个钩子确保组件挂载后立刻生效，且在切换页面后不会残留监听。

2. onMounted(() => {
3.   initLazyLoad();
4. });
6. onUnmounted(() => {
7.   destroyLazyLoad();
8. });

复制代码

六、完整脚本与样式片段（关键部分）

以下为整合后的脚本和模板结构，省略了与懒加载逻辑无关的交互代码。

2. <template>
3.   <div class="app-content">
4.     <div class="lazy-desc">🔥 图片懒加载功能 | 核心优势：进入视口才加载图片 → 首屏加载速度提升 80%、节省带宽资源、避免页面卡顿</div>
5.     <div class="card-list">
6.       <div class="item" v-for="(item, index) in TOTAL_ITEMS" :key="index">
7.         <img ref="imgRefs" :src="DEFAULT_IMG" alt="image" :data-src="IMG_URL_TEMPLATE(item)" />
8.       </div>
9.     </div>
10.   </div>
11. </template>
13. <script setup lang="ts">
14. import { ref, nextTick, onMounted, onUnmounted } from 'vue';
16. const TOTAL_ITEMS = 99;
17. const DEFAULT_IMG = 'https://pica.zhimg.com/v2-f052aa50ca65df4bad1c3b7e4084d00e_1440w.jpg';
18. const IMG_URL_TEMPLATE = (index: number) => `https://picsum.photos/400/600?r=${index}`;
20. const imgRefs = ref<HTMLImageElement[]>([]);
21. let observer: IntersectionObserver | null = null;
23. async function initLazyLoad() {
24.   observer = new IntersectionObserver(
25.     (entries, observer) => {
26.       for (const entry of entries) {
27.         if (!entry.isIntersecting) continue;
28.         const img = entry.target as HTMLImageElement;
29.         const realSrc = img.dataset.src;
30.         if (realSrc) img.src = realSrc;
31.         observer.unobserve(img);
32.       }
33.     },
34.     { threshold: 0.01 }
35.   );
37.   await nextTick();
38.   imgRefs.value.forEach((img) => observer?.observe(img));
39. }
41. function destroyLazyLoad() {
42.   if (!observer) return;
43.   imgRefs.value.forEach((img) => observer!.unobserve(img));
44.   observer.disconnect();
45.   observer = null;
46. }
48. onMounted(() => { initLazyLoad(); });
49. onUnmounted(() => { destroyLazyLoad(); });
50. </script>
52. <style lang="scss" scoped>
53. .app-content {
54.   --item-gap: 16px;
55.   --item-min-width: 150px;
56.   --item-height: 300px;
57. }
59. .lazy-desc {
60.   margin-bottom: 16px;
61.   padding: 8px 16px;
62.   background: #f0f9ff;
63.   border-left: 4px solid #409eff;
64.   border-radius: 4px;
65.   color: #1f2937;
66.   font-size: 14px;
67.   font-weight: 500;
68. }
70. .card-list {
71.   display: grid;
72.   grid-template-columns: repeat(auto-fill, minmax(var(--item-min-width), 1fr));
73.   gap: var(--item-gap);
74. }
76. .card-list .item {
77.   cursor: pointer;
78.   height: var(--item-height);
79.   border-radius: 4px;
80.   box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
81.   overflow: hidden;
82. }
84. .card-list .item img {
85.   display: block;
86.   width: 100%;
87.   height: 100%;
88.   transition: all 0.32s;
89. }
90. </style>

复制代码

七、关键点总结

- 使用 IntersectionObserver 替代 scroll 事件，浏览器自动优化，性能远优于手动计算。
- 占位图 + data-src 模式实现初始轻量渲染，真实图片按需加载。
- 图片加载后立即调用 unobserve 释放单个元素观察，避免浪费。
- 组件销毁时务必执行 disconnect 并置空 observer，防止内存泄漏。
- threshold: 0.01 适合大多数场景，可在首屏加载与带宽消耗之间取得平衡。

这套方案可直接嵌入商品列表、无限滚动相册等需要加载大量图片的 Vue3 项目中，无需第三方库，仅依赖浏览器原生 API，兼容现代主流浏览器。对于需要支持老版本浏览器的项目，可考虑给 IntersectionObserver 添加 polyfill 或降级为 scroll 监听方案。

热心网友7

这篇分享非常实用，把 IntersectionObserver 和 Vue3 的生命周期结合得很清晰。尤其是你特意在 `initLazyLoad` 里用 `nextTick` 等待 DOM 渲染，避免 `imgRefs` 为空，这个小细节很关键，新手很容易忽略。另外在 `destroyLazyLoad` 里逐个 `unobserve` 再加 `disconnect`，这种双重释放确实能彻底防止内存泄漏，点赞。 想请教一下：如果列表是动态加载更多（比如滚动到底部追加新图片），你一般是怎么处理新加入的元素的？是重新调用 `initLazyLoad` 还是单独对新元素调用 `observer.observe`？另外，你这里配的 `threshold: 0.01` 会让图片刚露头就加载，如果用户滚动很快，会不会出现大量图片同时请求的情况？有没有考虑配合 `rootMargin` 做预加载缓冲？