结论：用 IntersectionObserver 监听进入视口 + image-rendering: pixelated 强制底层占位图像素化 + data-src 存真实地址 + CSS 分层过渡，是目前最可控、不闪屏、不抖动的自适应占位图切换方案。
直接说结论：用 IntersectionObserver 监听进入视口 + image-rendering: pixelated 强制底层占位图像素化 + data-src 存真实地址 + CSS 分层过渡，是目前最可控、不闪屏、不抖动的自适应占位图切换方案。
为什么不能只靠 loading="lazy" 做占位？
它只控制浏览器是否预加载，不提供「何时触发占位图切换」的钩子。用户滚动时，图片可能已开始加载但尚未渲染，导致空白或错位；更糟的是，loading="lazy" 在 Safari 旧版本中会忽略 rootMargin，无法预加载。真正要控制「视觉节奏」，必须由 JS 主导时机，IntersectionObserver 是唯一现代且轻量的选择。
rootMargin 设多少才不会抖动又不浪费带宽？
设成 "300px" 是多数场景的甜点值——足够提前触发高清图加载（避免用户看到占位图后才开始请求），又不至于过早（比如 "800px" 可能拉取了用户永远不看的图）。关键点：
- 必须配合容器预留高度，例如用
aspect-ratio: 4/3或min-height: 200px，否则图片加载瞬间撑开布局，造成“跳屏” - 负值如
"-150px"实际是收缩判定区域，极易漏触发，不是预加载，是“少加载” - 如果 root 是某个滚动容器（比如
div#gallery），rootMargin就相对于该容器边界，不是屏幕视口
如何让占位图真正“自适应”且不糊成一片？
核心是分层 + 拉伸 + 渲染强制。不要用 base64 占位 SVG（太重），也不要依赖模糊滤镜（性能差、不可控）：
- 底层
<img class="placeholder">：src 指向一张 64×64 的 JPEG，通过width/height拉满容器，CSS 加image-rendering: pixelated（Chrome/Firefox 支持，Safari 需加-webkit-image-rendering: pixelated） - 上层
<img class="real-image">：初始src=""，opacity: 0，等load事件后再添加.loaded类触发动画 - 切记：不要在
IntersectionObserver回调里直接赋src就完事——得等img.onload触发后才启动 CSS 过渡，否则可能先淡入空白再闪出图
容易被忽略的兼容性与降级细节
真正在意用户体验的项目，得处理三类边缘情况：
- Safari 15.4 以下不支持
image-rendering: pixelated，需 fallback 到object-fit: cover+ 稍微放大占位图（比如 scale(1.1)），避免拉伸失真 - 服务端渲染（SSR）时，
IntersectionObserver不存在，需保留loading="lazy"和src占位图，确保首屏可读 - 用户禁用 JS 时，所有
data-src图片将永久不加载——务必在 HTML 中为.real-image设置一个极小的 fallbacksrc（如 1×1 透明 GIF），而不是留空
最麻烦的其实是图片尺寸未知时的 layout shift —— 它和 IntersectionObserver 本身无关，但没配好 aspect-ratio 或最小高度，再好的动画也会被滚动抖动毁掉。
