IntersectionObserver 是判断图片进入视口最可靠高效的方式，它原生支持、不触发重排重绘、可设 threshold 和 rootMargin 提前加载，需配合 unobserve、decode 和错误降级处理，并注意 SSR 一致性及跨浏览器兼容性。
IntersectionObserver 是判断图片进入视口的核心机制
浏览器原生的 IntersectionObserver API 是目前最可靠、性能最好的方式，它不依赖滚动事件监听，不会触发重排重绘，也不需要手动计算元素位置。只要目标元素（比如 <img>）与视口产生交集（哪怕只有 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 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）。
立即学习“Java免费学习笔记（深入）”；
- 在
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"是原生属性，但仅对<img>和<iframe>有效，且 Chrome 76+ 才支持，iOS Safari 直到 15.4 才完全可用
rootMargin 和 threshold 的组合调试——不同设备视口高度差异大，固定写死 "200px" 在小屏手机上可能过早触发，在桌面端又太晚。最好根据页面平均图片高度动态计算。 
