Intersection Observer 通过为每个 单独创建实例并设置 rootMargin 预留加载区域来精准监听进入视口，避免误触发与漏加载；需在回调中区分 entry.target 并及时 unobserve；配合 aspect-ratio 占位、opacity/transform 过渡及 will-change 优化动效，iOS 需延迟调用 takeRecords() 唤醒观察器；无需降级 scroll 监听，仅极低占比老旧 WebView 需简单 fallback。
Intersection Observer 怎么判断长图进入视口
关键不是监听整个页面滚动，而是让每个 <img alt="如何通过CSS实现移动端长图滚动加载动效_利用Intersection Observer与动画" > 自己“感知”是否出现在可视区域。直接给图片加 intersectionObserver 实例，rootMargin 设为 "0px 0px 200px 0px"（底部多预留 200px），避免用户还没滑到就触发加载，也防止快速滚动时漏掉。
常见错误是把所有图片塞进同一个 observer 却没在 callback 里区分 entry.target，结果一张图加载完，其他图的 src 全被误替换了。
- 每个
<img alt="如何通过CSS实现移动端长图滚动加载动效_利用Intersection Observer与动画" >都要单独调用observer.observe(img) - 加载完成立刻
observer.unobserve(img)，否则重复回调 - 不要在
callback里写img.src = img.dataset.src后立刻加动画类——得等自然宽高计算完成，否则height: 0 → auto动画会失效
CSS 动画怎么配合懒加载不闪、不跳
图片加载前必须有占位，否则 DOM 高度塌陷，用户滚动时页面会突然上跳。不能只靠 min-height 猜测高度，更不能留空盒子。
推荐方案：用 aspect-ratio + background-color 占位，加载后通过 opacity 和 transform 过渡，而不是改 display 或 visibility。
立即学习“前端免费学习笔记（深入）”；
- 初始状态：
img { opacity: 0; transform: translateY(20px); } - 加载完成加类：
.loaded { opacity: 1; transform: translateY(0); transition: opacity 0.3s, transform 0.3s; } - 必须加
will-change: opacity, transform防低端机卡顿 - 禁用
img { height: auto }，否则 iOS Safari 加载瞬间重排导致抖动
为什么 iOS 上动效卡顿或不触发
iOS Safari 对 IntersectionObserver 的触发时机更保守，尤其在页面刚加载、未完全渲染时，isIntersecting 可能一直为 false。这不是 bug，是 WebKit 的 lazy rendering 行为。
绕过方法不是降级用 scroll 事件，而是提前“唤醒”观察器：
- 在
DOMContentLoaded后延迟 16ms 调用一次observer.takeRecords()，强制初始化 - 给图片容器加
contain: layout style paint，减少重绘范围 - 避免在
callback中触发 layout（比如读取offsetHeight），否则 iOS 会同步回流，卡住动画帧 - 不用
@keyframes做渐显，iOS 对opacity的硬件加速支持比animation更稳
要不要 fallback 到 scroll 事件监听
不需要。所有主流移动端浏览器（Chrome Android、Safari iOS 13.4+、Firefox for Android）都已原生支持 IntersectionObserver，连微信内置浏览器（X5 内核 6.8+）也支持。唯一例外是某些老旧定制 ROM 的 WebView，但占比低于 0.3%。
真要兼容，也不是重写整套 scroll 监听逻辑，而是检测失败后只 fallback 到“加载即显示”，去掉动效，保持功能可用：
- 用
if (!('IntersectionObserver' in window))做简单判断 - fallback 时直接遍历
document.querySelectorAll('img[data-src]')批量赋值src，不加任何 class 或 transition - 别试图在 scroll 里做节流 +
getBoundingClientRect()计算——移动端 touchmove 触发频率高，容易丢帧
复杂点在于图片宽高比不一致时，aspect-ratio 无法统一；这时候得靠后端返回宽高字段，前端内联写成 style="--aspect-ratio: 1.78;"，再用 CSS 变量驱动占位。这个细节多数人会忽略，直到上线后发现瀑布流错乱。
