Vue 自定义指令 v-lazy 基于 IntersectionObserver 实现图片懒加载，预加载进入视口前100px的图片，支持响应式、背景图、降级兼容及加载状态管理，有效减少首屏时间20%~40%。
用 Vue 自定义指令实现图片懒加载，核心是监听元素进入视口时才加载真实图片，避免首屏大量图片阻塞渲染。关键不在写多少代码，而在准确判断可见性、处理加载状态、兼顾兼容性和用户体验。
监听元素是否进入视口（IntersectionObserver 是首选）
现代浏览器推荐使用 IntersectionObserver 替代 scroll + getBoundingClientRect 手动计算，性能更好、代码更简洁：
- 创建观察器时设置
rootMargin: '0px 0px 100px 0px'，让图片在进入视口前 100px 就开始加载，避免滚动过快时出现空白 - 每个 img 元素只 observe 一次，加载完成后调用
unobserve避免重复触发 - IE 不支持 IntersectionObserver，需降级：可用
scroll事件 +throttle（如 Lodash 的 debounce），或引入 polyfill
指令中管理图片加载流程（data-src → src，加 loading 状态）
自定义指令 v-lazy 要接管图片的生命周期：
- 把真实地址存在
data-src属性里，src初始为空或设为占位图（如 base64 小灰图） - 观察到元素可见后，将
data-src值赋给src，并移除data-src - 可添加
loading类名或绑定v-bind:class="{ 'is-loading': !loaded }"，配合 CSS 实现骨架屏或淡入效果 - 加载成功后加
is-loaded类；失败时可 fallback 到默认图或显示错误提示
支持响应式图片和背景图懒加载（不止 <img>）
实际项目中常需处理 <picture>、srcset 或元素背景图：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
立即学习“前端免费学习笔记（深入）”；
- 对
<picture>，指令应遍历其内部<source>标签，把data-srcset、data-media等属性同步替换为srcset、media - 对背景图，用
el.style.backgroundImage = `url(${src})`设置，并注意 URL 编码与引号包裹（如url("${src}")） - 可扩展指令参数，例如
v-lazy:bg表示背景图模式，v-lazy:responsive启用 srcset 支持
全局注册与按需启用（避免过度监听）
不是所有图片都需要懒加载：
- 首屏关键图（如 banner、logo）建议直接加载，不加 v-lazy
- 在
main.js中全局注册指令，但通过binding.arg或binding.modifiers控制行为，例如v-lazy.immediate强制立即加载 - 服务端渲染（SSR）时，指令不会执行，需配合
v-if="$route.name !== 'home'"等逻辑规避水合 mismatch
不复杂但容易忽略：记得给懒加载图片设置固定宽高或 aspect-ratio，防止加载时布局抖动。用好 v-lazy，首屏时间通常能减少 20%~40%，用户感知更明显。
