基于Vue3+IntersectionObserver实现高性能图片懒加载

一、原理概述

图片懒加载的核心思路其实很简单：图片进入用户可视区域时，才去加载真正的图片；没进入之前，先用一张占位图顶着。这么做的好处不言而喻——首屏加载速度、带宽消耗、页面卡顿感都能得到明显改善。

在 Vue3 里实现懒加载，最推荐的方式就是借助 IntersectionObserver API。相比过去用 scroll 事件手动计算位置，它有几个实打实的优势：

• 性能更优：浏览器自己优化交叉观察的时机，省去了手动算偏移量的麻烦
• 资源更省：元素一旦离开视口，监听会自动暂停，不会一直占着 CPU
• 代码更简洁：几行配置就能搞定之前几十行才能实现的逻辑

具体流程梳理一下：

1. 页面初始化时，图片的 src 先用占位图占位，真实的地址存在 data-src 属性里
2. 创建一个 IntersectionObserver 实例，让它盯着所有图片元素
3. 当某张图片进入视口（露出比例超过设定的阈值），就把 data-src 的值赋给 src，触发真实图片加载
4. 加载完成之后，立刻取消对该图片的观察，释放观察者资源

二、核心代码实现

配置项定义

DOM 引用获取

懒加载核心逻辑

/** IntersectionObserver 实例引用，组件销毁时需要手动清理 */let observer: IntersectionObserver | null = null/** * 初始化懒加载监听 * 使用 async 是为了确保 DOM 渲染完成后再执行监听 */async function initLazyLoad() {  // 创建观察者实例，传入回调函数和配置项  observer = new IntersectionObserver(    // entries: 触发回调时，传入所有发生交叉变化的元素数组    // observer: 观察者实例本身，用于调用 unobserve 取消观察    (entries, observer) => {      // 遍历所有发生变化的元素      for (const entry of entries) {        // isIntersecting: 元素是否进入视口        // ! 为 false 时表示元素离开了视口，无需处理，直接跳过        if (!entry.isIntersecting) continue        // 将 entry.target 断言为 HTMLImageElement 类型        // 因为 ref 数组中存储的正是图片 DOM 元素        const img = entry.target as HTMLImageElement        // dataset: 获取元素上 data-* 自定义属性        // data-src="真实图片地址" 存储在 dataset.src 中        const realSrc = img.dataset.src        // 将真实图片地址赋值给 src，触发浏览器加载真实图片        if (realSrc) img.src = realSrc        // 加载完成后立即取消观察该图片        // 避免已加载的图片占用观察者资源，提升性能        observer.unobserve(img)      }    },    {      // threshold: 交叉比例阈值，0.01 表示图片露出 1% 就触发回调      // 值范围 0~1，值越小越早触发，但可能浪费带宽      threshold: 0.01,    },  )  // 等待 DOM 渲染完成后再开始监听  // nextTick 确保 v-for 循环的图片 DOM 已经渲染到页面  await nextTick()  // 遍历所有图片 DOM，逐个注册到观察者中  // observe 之后，观察者就会开始监听该元素的可见性变化  imgRefs.value.forEach((img) => observer?.observe(img))}

资源清理（防止内存泄漏）

/** * 销毁观察者实例 * ⚠️ 组件销毁时必须调用！否则会内存泄漏 */function destroyLazyLoad() {  // 未初始化则直接返回，避免报错  if (!observer) return  // 遍历所有图片，先取消对每个图片的观察  // disconnect 之前建议先调用 unobserve，避免遗留监听  imgRefs.value.forEach((img) => observer!.unobserve(img))  // disconnect: 完全销毁观察者，释放所有资源  observer.disconnect()  // 重置为 null，标记已清理  observer = null}

生命周期钩子绑定

/** 组件挂载到页面后，立即初始化懒加载监听 */onMounted(() => {  initLazyLoad()})/** * 组件销毁前，清理观察者实例 * 防止用户切换页面后，观察者仍在后台运行消耗资源 */onUnmounted(() => {  destroyLazyLoad()})

三、完整代码示例

四、核心总结

本文通过 Vue3 + IntersectionObserver 实现了一套高性能的图片懒加载方案，关键要点可以这样归纳：

这个方案在多图列表场景下效果非常明显，商品列表、朋友圈图片流、相册之类的地方都可以直接拿来用。代码已经完整给出，复制过去就能跑起来。