判断dom节点是否在可视区域主流用intersection observer api（推荐）或getboundingclientrect（兼容旧环境），前者性能好、异步不阻塞主线程，后者需手动节流并适配嵌套滚动容器。
判断 DOM 节点是否在可视区域内，主流方法有两种：现代推荐用 Intersection Observer API，兼容旧环境可用 getBoundingClientRect 配合滚动检测。前者性能好、写法简洁；后者需手动防抖、注意滚动容器层级。
用 Intersection Observer（推荐）
这是浏览器原生异步方案，不阻塞主线程，适合绝大多数现代项目。
- 创建观察器时传入回调函数，元素可见性变化时自动触发
- 通过
threshold控制触发精度，比如[0, 0.25, 0.5, 1]表示在 0%、25%、50%、100% 可见时分别执行逻辑 - 用
rootMargin实现提前加载，例如'100px 0px 0px 0px'表示元素距离视口顶部还有 100px 就开始处理 - 目标元素调用
observer.observe(el)即可，销毁前建议调用observer.unobserve(el)避免内存泄漏
用 getBoundingClientRect（兼容旧版）
适用于需要支持 IE11 或嵌套在自定义滚动容器（如 overflow: auto 的 div）的场景。
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
- 调用
el.getBoundingClientRect()获取元素相对于视口的坐标对象 - 基础判断逻辑：元素上边缘在视口下方（
rect.top ），且下边缘在视口上方（<code>rect.bottom > 0） - 若元素不在
下直接滚动，而是嵌套在某个可滚动容器里，需监听该容器的scrollTop，并用其替代window.scrollY - 必须搭配节流（如 16ms），避免 scroll 事件频繁触发导致卡顿
实际使用中的关键细节
光判断是否可见还不够，落地时要注意这些点：
- 图片真实地址应存在
data-src或data-srcset中，初始src设为空或占位图 - 加载成功后及时取消观察（
observer.unobserve(el)）或打标记（如el.dataset.loaded = 'true'），防止重复请求 - 对已加载或正在加载的元素跳过处理，避免资源浪费
- 考虑弱网场景，增加加载失败后的 fallback，比如显示默认图或自动重试一次
不建议用 offsetTop + scrollTop 方案
这种写法依赖元素与 body 的绝对位置关系，在复杂布局（如 fixed 容器、transform 变形、shadow DOM）中容易出错，且无法响应滚动容器变化。截至 2026 年，已基本被更稳定可靠的方案替代。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
