如何用 Vue 自定义指令实现图片懒加载 提升网页加载速度实战指南

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 或元素背景图：

立即学习“前端免费学习笔记（深入）”；

• 对 <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%，用户感知更明显。