图片何时进入视口？JS懒加载实现技巧

本文深入解析了如何利用浏览器原生的 IntersectionObserver API 实现高性能、高兼容性的图片懒加载，彻底摒弃低效易卡顿的传统 scroll 轮询方案；不仅详解了 threshold 与 rootMargin 的协同调试技巧以实现精准预加载，还覆盖了 unobserve 清理、img.decode() 异步解码、404 降级处理、SSR 首屏一致性、框架集成及跨浏览器兼容等实战关键点，助你写出既流畅又健壮的懒加载逻辑。

IntersectionObserver 是判断图片进入视口的核心机制

浏览器原生的 IntersectionObserver API 是目前最可靠、性能最好的方式，它不依赖滚动事件监听，不会触发重排重绘，也不需要手动计算元素位置。只要目标元素（比如 ）与视口产生交集（哪怕只有 1px），回调就会被触发。

常见错误是用 window.onscroll + getBoundingClientRect() 轮询判断——这在快速滚动或低端设备上极易丢帧、卡顿，且无法处理 position: fixed 或 iframe 内嵌场景。

• threshold 设为 [0, 0.1, 0.5] 可提前在图片还有 10% 高度、50% 高度可见时触发加载，避免用户已看到空白再加载
• 必须配合 rootMargin 使用，例如 "100px" 表示提前 100px 开始监听，解决“滑到底才触发”的延迟感
• 注意：Safari 旧版本（IntersectionObserver，需用 lozad.js 或降级方案

懒加载图片的 HTML 结构要区分占位与真实资源

不能直接把真实 URL 写进 src，否则浏览器会立即发起请求。必须用自定义属性暂存地址，等进入视口后再赋值。

推荐结构如下：

<img
  data-src="https://example.com/photo.jpg"
  src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
  class="lazy"
  alt="描述文字">

• src 用最小透明 GIF 占位，比 src="" 更安全（后者在部分浏览器中仍会发空请求）
• data-src 存真实地址；也可用 data-srcset + data-sizes 支持响应式图片
• 务必保留 alt，这对可访问性和 SEO 都关键
• 不要给 img 设固定宽高（除非已知尺寸），否则可能造成布局偏移（CLS）

加载失败时要提供降级处理

网络中断、URL 失效、CORS 限制都可能导致 img.onload 不触发，而 img.onerror 也不会在所有情况下被捕获（比如跨域图片未设置 crossorigin）。

• 在 observer.callback 中设置超时兜底：

  const timer = setTimeout(() => {
    img.src = fallbackSrc;
  }, 5000);

• 加载成功后记得调用 observer.unobserve(img)，避免重复触发
• 若图片需解码（如 WebP/AVIF），可用 img.decode() 返回 Promise，失败时回退到 JPEG
• 服务端返回 404 时，浏览器控制台会显示 GET https://... 404 (Not Found)，但 JS 无法直接捕获该状态，只能靠超时+视觉反馈（如加 error class）

SSR 或静态站点需注意首次渲染一致性

服务端渲染时，IntersectionObserver 还未初始化，但图片 HTML 已输出。如果服务端把 data-src 直接写进 src，就失去懒加载意义；如果全用占位图，首屏关键图片又会延迟加载。

• 对首屏图片（loading="eager"），可直接用真实 src，现代浏览器会自动优化
• Next.js / Nuxt 等框架建议用 useIntersection 或 v-lazy 指令封装逻辑，避免手写 observer
• 静态站点生成器（如 Hugo、Jekyll）可在构建时识别 class="lazy" 并注入最小 JS 加载器，不依赖运行时框架
• 注意：loading="lazy" 是原生属性，但仅对 和