Vue.js 图片懒加载指令基于 Intersection Observer API 实现，支持 Vue 2/3，含兼容降级、错误处理与轻量性能监测，兼顾复用性、性能与体验。
Vue.js 中实现图片懒加载指令，核心是利用 Intersection Observer API 替代监听 scroll 事件，避免频繁重排重绘；封装为自定义指令可复用、解耦业务逻辑，并配合性能监测（如首次渲染时间、加载成功率、资源耗时）能真实反映优化效果。
懒加载指令基础封装（支持 Vue 2 / 3）
以 Vue 3 的 v-lazy 指令为例，使用 mounted 和 unmounted 钩子管理观察器生命周期：
- 指令接收
value（图片真实 src）和arg（可选占位图或 loading 状态类名） - 创建
IntersectionObserver，阈值设为0.05（元素进入视口 5% 即触发） - 回调中调用
el.src = value，并移除指令绑定的 class（如lazy-loading） - 在
unmounted中调用observer.unobserve(el)防止内存泄漏
兼容性兜底与错误处理
对于不支持 Intersection Observer 的旧浏览器（如 IE），需降级为 scroll + getBoundingClientRect 方案：
- 检测
window.IntersectionObserver是否存在，不存在则 fallback 到节流 scroll 监听 - 图片加载失败时，触发
error事件，可替换为默认占位图或上报异常 - 添加
loading="lazy"属性作为原生懒加载后备（现代浏览器自动启用）
嵌入轻量性能监测点
在指令内部埋点，不依赖外部 SDK，聚焦关键指标：
-
首次进入视口时间：记录
observer回调触发时刻（performance.now()） -
加载耗时：从设置
el.src开始，监听load或error，计算差值 -
加载成功率：统计成功/失败数量，按页面维度聚合后通过
console.table或sendBeacon上报
实际使用与优化建议
在模板中直接使用，保持语义清晰：
- 支持动态更新：当
v-lazy绑定值变化时，自动重新加载（需在updated钩子中处理） - 避免对大量图片同时初始化 observer，可加防抖或分批 observe（如每 10 张一组）
- CSS 预留宽高或使用 aspect-ratio，防止懒加载触发时布局抖动（CLS 优化）
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
