老实说，

一、使用者痛点与技术挑战

在实际项目中。经常会遇到以下痛点：

• **首屏加载缓慢**：所有图片一次性请求导致浏览器阻塞。
• **带宽浪费**：页面滚动时仍然预加载未出现的图片。
• **页面卡顿**：大量 scroll 事件监听和手动计算导致主线程被占用。
• **内存泄漏风险**：scroll 事件绑定未及时移除，切换页面后仍在后台运行。

为了解决这些问题，IntersectionObserver 提供了一种高效、低成本的方案。

二、原理概述

图片懒加载的主要思想是：仅当图片进入使用者可视区域时才触发真实图片请求；未进入时显示占位图，

相比传统的 scroll 监听方式。IntersectionObserver 拥有以下优势：

• 性能更好浏览器内部调整交叉观察，无需手动计算位置。其实，
• 更省资源元素离开视口后自动暂停监听。
• 代码更简洁几行配置就可以完成复杂懒加载逻辑。

实现流程

1. 页面初始时给每个 设置占位图
2. 属性中保存真实地址。
3. Create an IntersectionObserver instance and observe all image elements.
4. The observer callback loads image when it enters viewport .
5. After loading completes。unobserve element to free resources.

三、主要代码实现

配置项定义

DOM 引用获取

懒加载主要原因

/** IntersectionObserver 实例引用，组件销毁时需要手动清理 */
let observer: IntersectionObserver | null = null
/**
* 初始化懒加载监听
* 使用 async 是为了确保 DOM 渲染完成后再执行监听
*/
async function initLazyLoad {
// 创建观察者实例。并设置阈值为10%可见即触发
observer = new IntersectionObserver(
=> {
for {
if continue
const img = entry.target as HTMLImageElement
const realSrc = img.dataset.src
if img.src = realSrc
// 加载完成后立即取消观察
obs.unobserve
}
},{ threshold: 0.1 } // 当至少10%可见时触发
)
await nextTick // 确保 v-for 循环渲染完毕
// 注册所有图片到观察者
imgRefs.value.forEach => observer?.observe)
}

资源清理

/**
* 销毁观察者实例
* ⚠️ 必须在组件销毁前调用，否则会造成内存泄漏。*/
function destroyLazyLoad {
if return
// 停止对所有已观察元素的监控
imgRefs.value.forEach => observer!.unobserve)
// 完全断开连接释放资源
observer.disconnect
observer = null
}

生命周期钩子绑定

onMounted => {
initLazyLoad
})
onUnmounted => {
destroyLazyLoad
})

四、完整代码示例