用 rootmargin 实现预判式加载，核心是通过正值（如"0px 0px 200px 0px"）扩展 intersectionobserver 感知区域，使元素在进入视口前触发回调；需配合守卫逻辑、移除 loading="lazy"、预设宽高及 img.decode() 解码确保平滑呈现。
用 rootMargin 实现预判式加载，核心是“把判定边界往外推”，让浏览器在元素真正进入视口前就触发回调——这不是等它出现，而是提前一步把它“请进来”。
rootMargin 的本质不是偏移，而是扩展判定区域
很多人误以为 rootMargin: "-100px" 是“提前 100px 加载”，其实它会把判定框向内收缩，反而让元素更难被识别为相交。真正起作用的是正值：它把 IntersectionObserver 的“感知范围”向下（或上下左右）扩大。
-
"0px 0px 200px 0px"表示视口底部向下扩展 200px，元素离视口底边还有 200px 时就触发回调 - 移动端建议固定像素值（如
200px），避免百分比不支持或 viewport 缩放导致失效 - PC 端滚动更稳，可加大到
300px；若有底部固定导航栏，可微调为"0px 0px 250px -50px"抵消遮挡
配合逻辑控制，防止重复加载和空白显示
预判式加载容易因滚动抖动或 resize 多次触发回调，必须加守卫逻辑：
- 用
data-src存原始地址，src为空或为占位图时才赋值 - 加载成功后立即调用
observer.unobserve(img)，避免后续干扰 - 务必移除
loading="lazy"属性，它会与 IntersectionObserver 冲突，拦截二次赋值 - 图片需预设宽高或
aspect-ratio，否则加载后尺寸塌陷，看起来就是“白块”
动态适配不同设备与滚动行为
静态写死一个 rootMargin 值不够智能，实际中可按需微调：
- 快速滚动场景下，200px 缓冲区可能不够，可监听
scroll事件粗略估算速度，临时放大rootMargin - 折叠屏设备展开时视口高度突变，需监听
resize并重新初始化 observer - 用户慢速浏览时，可缩小
rootMargin减少无效预取；首屏后加载完成再启用更大缓冲
进阶：结合 img.decode() 确保视觉就绪
光设 src 不等于图片立刻能显示。网络加载完还要解码，尤其 WebP/AVIF 在低端设备上耗时明显。安全做法是：
- 拿到
realSrc后先创建Image()实例，调用.decode() - 解码成功后再赋值给真实
<img>的src，并插入 DOM - 这样能避免“已赋值但画面卡顿/闪烁”，实现真正平滑的预判呈现
