判断元素是否进入可视区域主要用intersection observer api（首选，异步不卡主线程）和getboundingclientrect配合滚动监听（兼容旧版），前者通过threshold和rootmargin精准控制加载时机，后者需防抖且注意滚动容器。
判断元素是否进入可视区域，是实现懒加载的核心环节。现代开发中主要用两种方式：Intersection Observer API 和 getBoundingClientRect 配合滚动监听，前者更推荐，后者兼容性更好。
用 Intersection Observer API（首选）
这是浏览器原生支持的异步观察机制，不卡主线程，写法简洁，适合大多数现代项目。
- 创建观察器时传入回调函数，每次元素可见性变化都会触发
- 通过 threshold 可精确控制触发时机，比如设为
[0, 0.1, 0.5, 1]表示在 0%、10%、50%、100% 可见时分别执行逻辑 -
rootMargin 支持提前加载，例如
'100px 0px 0px 0px'表示元素距离视口顶部还有 100px 时就开始加载 - 观察目标只需调用
observer.observe(el)，无需手动清理（但建议在元素销毁时调用unobserve）
用 getBoundingClientRect 手动计算（兼容旧版）
适用于需要支持 IE11 或某些特殊滚动容器（如自定义 scroll 区域）的场景。
- 调用
el.getBoundingClientRect()获取元素相对于视口的坐标 - 判断是否可见的基本逻辑是：
rect.top 0 - 必须配合
scroll事件监听，但要加防抖（如 16ms 节流），否则频繁触发影响性能 - 注意：若目标元素不在 body 下直接滚动，而是嵌套在某个
overflow: auto的容器里，需监听该容器的scrollTop并用其替代window.scrollY
实际懒加载中的关键细节
光判断可见还不够，落地时要注意这些点：
- 图片真实地址应存在
data-src或data-srcset中，初始src设为空或低清占位图 - 加载成功后记得移除监听或取消观察，避免重复执行；可用
observer.unobserve(el)或标记loaded = true - 对已加载或正在加载的元素跳过处理，防止重复请求
- 考虑网络较慢时的 fallback，比如加载失败后显示默认图或重试机制
要不要回退到 scrollTop + offsetTop 方案？
不建议。虽然它看起来简单，但依赖文档流和父级定位，容易受 transform、position: fixed、iframe 等影响，计算结果不可靠。getBoundingClientRect 是更稳定的选择。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
