原生 loading="lazy" 不支持自定义 rootMargin，无法提前触发加载；必须改用 Intersection Observer 并设置如 "300px 0px 0px 0px" 的 rootMargin 手动控制，配合 data-src、解码优化与兼容性降级。
不能靠 loading="lazy" 的 rootMargin 属性提前触发——它根本不支持自定义 rootMargin。想让图片在真正进入视口前就开始加载，必须放弃原生 lazy，改用 Intersection Observer 手动控制。
为什么原生 loading="lazy" 无法提前加载
浏览器对 loading="lazy" 的触发时机是封闭实现的，内部使用 Intersection Observer，但 rootMargin 固定且不可配置。你写 <img loading="lazy" style="root-margin: 300px"> 或加 data 属性，统统无效。百分比值（如 "100%"）在 rootMargin 中也不被识别，只接受 px/em/rem 等单位。
用 Intersection Observer 实现“提前一屏”加载
核心是设置合理的 rootMargin 值，让检测区域向上扩展，图片还没滚动到视口时就触发回调：
- 取值参考：移动端保守用
"300px 0px 0px 0px"；桌面端可设为视口高度的 80%~100%，例如"600px 0px 0px 0px" - HTML 结构保持简洁：
<img src="placeholder.svg" width="300" height="200" alt=""> - JS 中创建 observer 时传入该值：
new IntersectionObserver(callback, { rootMargin: "300px 0px 0px 0px" }) - 回调里只做两件事：赋值
el.src = el.dataset.src，然后调用observer.unobserve(el)
避免常见坑：提前加载 ≠ 提前解码或抢占带宽
提前加载只是提早发起网络请求，不等于立刻渲染或阻塞主线程：
立即学习“前端免费学习笔记（深入）”；
- 别在回调里直接写死
src，应配合srcset和sizes按设备选图 - 大图建议调用
img.decode()异步解码，防止渲染卡顿 - 首屏关键图（Banner、Logo）禁用懒加载，用
<link rel="preload">强制提前拉取 - 监听前先过滤已出现在视口内的元素，否则页面一打开就批量加载，失去“懒”的意义
兼容性与降级方案
现代浏览器基本都支持 Intersection Observer，但老版本需降级：
- 先检测：
if ('IntersectionObserver' in window)，不支持则 fallback 到 scroll + getBoundingClientRect（慎用，性能较差） - JS 被禁用时，可在 HTML 中保留
<noscript><img src="fallback.jpg"></noscript> - 图片加载失败时，绑定
onerror回调，自动切到占位图：img.onerror = () => img.src = "/placeholder.svg"
