如何实现JavaScript懒加载_图片何时进入视口？

IntersectionObserver 是判断图片进入视口最可靠高效的方式，它原生支持、不触发重排重绘、可设 threshold 和 rootMargin 提前加载，需配合 unobserve、decode 和错误降级处理，并注意 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，否则浏览器会立即发起请求。必须用自定义属性暂存地址，等进入视口后再赋值。

推荐结构如下：

@@##@@

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

• 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="tuc-19bc10f7-a8502a-0 lazy tuc-19bc10f7-a8502a-0" 并注入最小 JS 加载器，不依赖运行时框架
• 注意：loading="lazy" 是原生属性，但仅对 和 有效，且 Chrome 76+ 才支持，ios Safari 直到 15.4 才完全可用

实际项目中最容易被忽略的是 rootMargin 和 threshold 的组合调试——不同设备视口高度差异大，固定写死 "200px" 在小屏手机上可能过早触发，在桌面端又太晚。最好根据页面平均图片高度动态计算。