怎样使用Intersection Observer实现懒加载_它有什么优势

Intersection Observer 是浏览器原生 API，用于高效监听元素与视口的交叉状态，实现懒加载；它无需手动计算位置、不阻塞主线程、支持异步回调及局部容器，性能优于 scroll 事件。

Intersection Observer 是浏览器原生提供的 API，专门用于监听目标元素与视口（或指定容器）的交叉状态变化。实现图片、组件或内容的懒加载时，它比传统的 scroll 事件监听更高效、更轻量。

懒加载的核心逻辑：只在元素即将进入可视区域时才加载资源

传统方案常依赖监听 scroll 或 resize 事件，频繁触发重排重绘，还容易因节流/防抖设置不当导致加载延迟或卡顿。Intersection Observer 把这个过程交给浏览器底层调度，回调函数只在元素真正进入或离开阈值范围时执行，不阻塞主线程。

• 无需手动计算元素位置、滚动偏移量或视口尺寸
• 自动处理滚动、缩放、页面可见性切换等场景
• 支持异步回调，天然适配 promise 和现代加载逻辑（如动态 import）

基础用法：三步完成图片懒加载

假设页面中图片使用 data-src 存放真实地址，src 先为空或占位图：

• 创建观察器：传入回调函数和配置项（如 threshold: 0.1 表示元素 10% 进入视口就触发）
• 定义回调：在回调中判断 isIntersecting，为真则加载图片并停止观察该元素
• 开始观察：对每个带 data-src 的 调用 observer.observe(img)

代码片段示意：

const observer = new IntersectionObserver((entries) => {   entries.forEach(entry => {     if (entry.isIntersecting) {       const img = entry.target;       img.src = img.dataset.src;       observer.unobserve(img); // 加载后停止观察，避免重复触发     }   }); }, { threshold: 0.1 });  document.querySelectorAll('img[data-src]').forEach(img => observer.observe(img));

相比 scroll + getBoundingClientRect 的明显优势

Intersection Observer 不是“更好写的 scroll”，而是架构层面的升级：

• 性能友好：浏览器在空闲时段批量处理交叉计算，不打断渲染帧，FPS 更稳定
• 兼容性扎实：chrome 51+、firefox 55+、safari 12.1+、edge 79+ 均已支持，配合简单降级（如 onload fallback）可覆盖绝大多数用户
• 语义清晰：关注“是否可见”，而非“坐标多少”，逻辑更贴近业务意图，维护成本低
• 支持根容器：可指定任意元素作为“视口”，轻松实现局部滚动容器内的懒加载（如弹窗列表、卡片流）

实用技巧与注意事项

真正落地时，几个细节会影响体验和健壮性：

• 给图片设置固定宽高或 aspect-ratio，防止加载时布局跳动
• 配合 loading="lazy" 属性做双重保障（现代浏览器会自动处理原生懒加载）
• 对关键首屏图片，仍建议直接写 src，避免白屏风险
• 服务端开启 http/2 或 cdn 缓存，让懒加载后的请求更快响应
• 若需兼容老版本 ios Safari，可用 polyfill（如 w3c 官方 polyfill），但注意 polyfill 仍基于 scroll 模拟，性能略打折扣