1. 为什么需要图片懒加载在开发网页应用时图片资源往往是页面性能的最大瓶颈之一。想象一下一个电商网站的商品列表页可能有几十张高清产品图如果一次性加载所有图片不仅会消耗大量带宽还会显著拖慢页面渲染速度。这就是为什么我们需要图片懒加载技术。懒加载的核心思想很简单只加载用户当前可见区域的图片当用户滚动页面时再逐步加载进入视口的其他图片。这种按需加载的方式可以大幅减少初始页面加载时的请求数量和数据量。根据我的实测在一个包含50张图片的页面上使用懒加载可以将首屏加载时间从3秒降低到1秒以内。传统实现方式通常是通过监听scroll事件结合getBoundingClientRect()计算元素位置。但这种方法有两个明显缺点一是需要频繁计算性能开销大二是容易造成抖动现象。而现代浏览器提供的IntersectionObserver API完美解决了这些问题。2. IntersectionObserver原理解析2.1 什么是IntersectionObserverIntersectionObserver是浏览器原生提供的API用于异步观察目标元素与其祖先元素或顶级文档视口的交叉状态。简单说它可以告诉我们某个元素什么时候进入或离开可视区域。这个API有三个关键优势高性能采用异步回调机制不会阻塞主线程精确自动处理各种边界情况灵活可以自定义触发阈值和根元素2.2 基本用法示例下面是一个最简单的IntersectionObserver使用示例const observer new IntersectionObserver((entries) { entries.forEach(entry { if(entry.isIntersecting) { console.log(元素进入视口); } }); }); // 开始观察某个元素 observer.observe(document.querySelector(.lazy-img));在实际项目中我们通常会设置一些配置选项const options { root: null, // 默认为视口 rootMargin: 0px, // 类似于CSS的margin threshold: 0.1 // 交叉比例达到10%时触发 }; const observer new IntersectionObserver(callback, options);3. Vue3中的自定义指令实现3.1 自定义指令基础Vue3的自定义指令提供了更灵活的API来操作DOM。一个指令定义对象可以提供以下几个钩子函数mounted元素被插入到DOM后调用updated元素更新后调用unmounted元素从DOM移除后调用我们主要使用mounted钩子来实现懒加载功能。下面是最基础的指令实现app.directive(lazy, { mounted(el, binding) { const observer new IntersectionObserver((entries) { entries.forEach(entry { if(entry.isIntersecting) { el.src binding.value; observer.unobserve(el); } }); }); observer.observe(el); } });3.2 添加加载状态和错误处理完善的懒加载指令应该考虑以下情况加载中的占位图加载失败时的错误处理取消观察的时机优化改进后的代码如下app.directive(lazy, { mounted(el, binding) { // 设置占位图 el.src /placeholder.jpg; const observer new IntersectionObserver((entries) { entries.forEach(entry { if(!entry.isIntersecting) return; const img new Image(); img.src binding.value; img.onload () { el.src binding.value; observer.unobserve(el); }; img.onerror () { el.src /error.jpg; observer.unobserve(el); }; }); }, { threshold: 0.01 }); observer.observe(el); } });4. 使用VueUse的useIntersectionObserver4.1 VueUse简介VueUse是一个基于Vue组合式API的工具函数集合提供了大量实用的功能。其中useIntersectionObserver是对原生API的封装使用起来更加方便。安装VueUsenpm install vueuse/core4.2 使用示例下面是使用useIntersectionObserver实现的懒加载指令import { useIntersectionObserver } from vueuse/core; app.directive(lazy, { mounted(el, binding) { const { stop } useIntersectionObserver(el, ([{ isIntersecting }]) { if(isIntersecting) { el.src binding.value; stop(); } }); } });相比原生实现VueUse版本有几个优点自动处理兼容性问题与Vue生命周期自动绑定提供了更简洁的API4.3 性能优化技巧在实际项目中我总结了几个优化点预加载当图片接近视口时就提前加载批量处理对列表项使用同一个observer实例内存管理及时清理不再需要的observer优化后的代码示例app.directive(lazy, { mounted(el, binding) { const { stop } useIntersectionObserver(el, ([{ isIntersecting }]) { if(isIntersecting) { loadImage(binding.value).then(() { el.src binding.value; stop(); }); } }, { rootMargin: 100px, // 提前100px加载 } ); } }); async function loadImage(url) { return new Promise((resolve, reject) { const img new Image(); img.src url; img.onload resolve; img.onerror reject; }); }5. 完整插件实现与最佳实践5.1 封装为可复用插件为了更好的代码组织我们可以将懒加载功能封装为Vue插件// lazy.js import { useIntersectionObserver } from vueuse/core; export default { install(app, options {}) { const defaults { loading: /placeholder.jpg, error: /error.jpg, rootMargin: 100px, threshold: 0.01, ...options }; app.directive(lazy, { mounted(el, binding) { el.src defaults.loading; const { stop } useIntersectionObserver(el, ([{ isIntersecting }]) { if(isIntersecting) { const img new Image(); img.src binding.value; img.onload () { el.src binding.value; stop(); }; img.onerror () { el.src defaults.error; stop(); }; } }, { rootMargin: defaults.rootMargin, threshold: defaults.threshold } ); } }); } };5.2 在项目中使用注册插件// main.js import { createApp } from vue; import LazyLoad from ./plugins/lazy; const app createApp(App); app.use(LazyLoad, { loading: /custom-loading.jpg, error: /custom-error.jpg }); app.mount(#app);在模板中使用img v-lazyimageUrl altproduct image5.3 性能对比与实测数据在我的一个电商项目实测中对比如下指标指标无懒加载基础懒加载优化后懒加载首屏加载时间3.2s1.8s1.2s总请求数56128内存占用85MB45MB38MB滚动流畅度卡顿较流畅非常流畅可以看到经过优化的懒加载方案在各方面都有显著提升。特别是在移动端这种优化带来的用户体验改善更加明显。6. 常见问题与解决方案6.1 图片闪烁问题有时候图片加载时会出现短暂闪烁这是因为占位图和实际图片尺寸不一致导致的。解决方案确保占位图与实际图片尺寸比例相同使用CSS设置固定宽高比容器添加平滑过渡效果.lazy-container { position: relative; padding-top: 75%; /* 4:3比例 */ overflow: hidden; } .lazy-container img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 0.3s; } .lazy-container img[data-loaded] { opacity: 1; }6.2 SSR兼容性问题在服务端渲染(SSR)场景下需要特殊处理避免在服务端执行Observer相关代码使用v-if或client-only组件控制考虑使用兼容性更好的懒加载库app.directive(lazy, { mounted(el, binding) { if(typeof window undefined) return; // 客户端代码... } });6.3 动态内容更新对于动态加载的内容需要手动处理新元素的懒加载。有两种方案使用MutationObserver监听DOM变化在内容更新后重新初始化懒加载// 方案1使用MutationObserver const mo new MutationObserver(() { // 查找新添加的图片元素并观察 }); mo.observe(document.body, { childList: true, subtree: true }); // 方案2在内容更新后调用 function updateContent() { loadNewContent().then(() { initLazyLoad(); // 重新初始化懒加载 }); }7. 进阶技巧与扩展应用7.1 背景图懒加载同样的原理也可以应用于CSS背景图的懒加载app.directive(lazy-bg, { mounted(el, binding) { const { stop } useIntersectionObserver(el, ([{ isIntersecting }]) { if(isIntersecting) { el.style.backgroundImage url(${binding.value}); stop(); } }); } });7.2 视频懒加载视频资源也可以使用类似的懒加载技术app.directive(lazy-video, { mounted(el, binding) { const { stop } useIntersectionObserver(el, ([{ isIntersecting }]) { if(isIntersecting) { el.src binding.value; el.load(); stop(); } }); } });7.3 组件懒加载结合Vue的defineAsyncComponent可以实现组件的懒加载const LazyComponent defineAsyncComponent(() { return new Promise(resolve { const observer new IntersectionObserver(([entry]) { if(entry.isIntersecting) { import(./HeavyComponent.vue).then(module { resolve(module); observer.disconnect(); }); } }); observer.observe(document.querySelector(#component-placeholder)); }); });8. 与其他技术的结合使用8.1 配合图片CDN优化结合图片CDN的格式转换和尺寸调整功能可以进一步优化img v-lazyhttps://cdn.example.com/${imageId}?w800h600formatwebp8.2 响应式图片处理根据设备像素比加载不同分辨率的图片app.directive(lazy-responsive, { mounted(el, binding) { const dpr window.devicePixelRatio || 1; const url dpr 1 ? binding.value.high : binding.value.low; const { stop } useIntersectionObserver(el, ([{ isIntersecting }]) { if(isIntersecting) { el.src url; stop(); } }); } });8.3 与IntersectionObserver的其他应用结合IntersectionObserver还可以用于实现无限滚动加载动画触发广告曝光统计性能监控// 曝光统计示例 const observer new IntersectionObserver((entries) { entries.forEach(entry { if(entry.isIntersecting) { trackExposure(entry.target.dataset.trackId); observer.unobserve(entry.target); } }); }, { threshold: 0.5 }); document.querySelectorAll([data-track]).forEach(el { observer.observe(el); });在实际项目中我通常会创建一个统一的IntersectionObserver管理类来集中处理各种交叉观察需求避免创建过多的observer实例影响性能。