rootMargin设为正值时图片提前加载的原理是扩展Intersection Observer的检测区域，其值只接受px/em/rem等单位，百分比无效；需用JS手动实现而非原生loading="lazy"。
rootMargin 设置为正值时图片提前加载的原理
浏览器对 loading="lazy" 的懒加载触发时机，本质上是基于 Intersection Observer 的可见性判断。而 rootMargin 就是这个 observer 的边界偏移量——它不是“提前一屏”的魔法参数，而是以当前视口（root）为基准，向外扩展的一块虚拟检测区域。设为 "100%" 并不等于“提前一屏”，因为百分比值在 rootMargin 中**无效**，只接受 px、em、rem 等绝对/相对单位；真正起作用的是像 "200px" 这样的值。
实际提前距离 = rootMargin 的 top 值（比如 "200px 0px 0px 0px"）。若想做到“用户滚动到该图上方还有约 1 屏距离时就开始加载”，通常取设备视口高度的 80%~100%，但需注意：移动端视口高度波动大（地址栏收放、横竖屏），保守做法是固定值（如 "300px"）或用 JS 动态计算后注入。
如何给 loading="lazy" 元素设置 rootMargin
HTML 原生 loading="lazy" 不支持直接写 rootMargin —— 它由浏览器内部的默认 observer 控制，你无法干预。想自定义 rootMargin，必须放弃原生 lazy，改用 Intersection Observer 手动实现懒加载逻辑。
- 不能这样写：
<img loading="lazy" style="root-margin: 300px;">（无效） - 也不能靠 CSS 或属性名伪造：
rootmargin、data-root-margin都不会被浏览器识别 - 正确路径：监听
img元素，用new IntersectionObserver(..., { rootMargin: "300px 0px 0px 0px" })判断进入时机，再手动设置src或srcset
示例关键代码：
立即学习“前端免费学习笔记（深入）”；
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
const io = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const img = entry.target;
img.src = img.dataset.src;
img.classList.remove('lazy');
io.unobserve(img);
}
});
}, { rootMargin: "300px 0px 0px 0px" });
<p>document.querySelectorAll('img[data-src]').forEach(img => io.observe(img));
移动端 rootMargin 设为多大才真能“提前一屏”
“一屏”在移动浏览器里没有固定像素值。iPhone 14 Pro 视口高度约 844px（竖屏），但 Safari 地址栏会动态遮挡/露出，导致视口高度在 600–844px 间跳变。Android 更复杂，Chrome、Firefox 对 viewport 的处理也不一致。
所以硬写 "800px" 在小屏上可能过早加载（浪费带宽），在大屏折叠屏上又不够。更稳妥的做法：
- 用
window.innerHeight获取当前可用高度，乘以 0.8 后取整：Math.round(window.innerHeight * 0.8) + "px" - 监听
resize事件，在横竖屏切换或地址栏收放后重新初始化 observer（注意防抖） - 对关键首屏下方 1–2 张图，可单独加 class（如
img-priority-below-fold），用更大的rootMargin（如"500px"）
别忘了 fallback：如果 JS 失败或被禁用，至少保留 loading="eager" 或默认 src，避免图片完全不显示。
和原生 loading="lazy" 混用的风险
不要同时给一个 img 加 loading="lazy" 和手动 observer——浏览器可能在你还没触发 src 赋值前，就按自己的规则提前加载了（尤其 Chrome 120+ 对首屏下 1–2 屏做了激进预加载），造成重复请求或资源浪费。
- 检查 Network 面板中同一张图是否出现两次
200请求 - 确保所有手动控制的图片都移除
loading="lazy"属性 - 如果项目已大量使用原生 lazy，建议统一迁移到自定义方案，而非混合
真正可控的提前加载，从来不是靠 HTML 属性开关，而是你亲手配置 observer 的 rootMargin 和触发时机——那几行 JS 代码，就是你和浏览器加载策略之间的谈判桌。
