原生 loading="lazy" 由浏览器内置 intersection observer 控制，提前加载且 rootmargin 不可配置；其触发受视口变化、父容器样式（如 transform/visibility）及 ssr hydration 影响，首屏图应设 loading="eager"。
loading="lazy" 的触发时机由浏览器内置 Intersection Observer 决定，不是“滚动到眼前才加载”
它确实会提前加载，但这个“提前量”是浏览器私有实现，Chrome 约 1250px，Firefox 和 Safari 也类似，且不可配置。你写 loading="lazy" 后，浏览器内部会创建一个 IntersectionObserver 实例，用默认 rootMargin（比如 "1250px"）去监听——这意味着用户还没滚到图片位置，请求早已发出。
常见误解是“它等图片进入视口才开始加载”，实际行为更接近：“只要估算你**马上要看到它了**，就立刻 fetch”。这也是为什么在 4G 或光纤下，经常发现懒加载图片“一滚就出来”，不是它不懒，而是提前量足够大。
- 这个阈值与设备像素比、缩放级别、甚至页面是否在后台标签页有关，无法通过 HTML 属性调整
-
rootMargin在原生loading="lazy"中完全无效——你写style="root-margin: 200px"或data-root-margin都不会被识别 - 如果想精确控制提前距离（比如只提前
300px），必须放弃原生方案，改用IntersectionObserver手动实现
移动端视口变化导致 lazy 触发不稳定，尤其 iOS Safari 地址栏收放时
iOS Safari 的视口高度会随地址栏显隐动态变化，比如从竖屏滚动到顶部时地址栏收起，window.innerHeight 突然变大，原本“还在视口外”的图片可能瞬间被判定为“已可见”，触发立即加载；反之，下滑时地址栏弹出，视口缩小，某些本该提前加载的图反而被延迟。
这种抖动会让 loading="lazy" 的触发时机变得不可预测，尤其对瀑布流或固定高度卡片列表影响明显——同一张图在不同滚动节奏下，可能一次提前加载、一次滚到才加载。
- 不要依赖百分比单位（如
"100%"）设rootMargin：它在IntersectionObserver中也无效，只接受px、em、rem - 保守做法是用固定像素值（如
"300px"）替代“一屏”这类模糊概念；若需适配，可用 JS 动态读取window.innerHeight * 0.8后注入 observer - 微信 X5 内核（尤其旧版）仍存在地址栏逻辑 bug，部分机型会误判视口边界，建议对关键路径做 fallback 检测
首屏图片加 loading="lazy" 不一定白屏，但 load 事件时机和渲染顺序会错乱
浏览器对首屏内带 loading="lazy" 的图片，处理方式是：布局完成后立即发起请求，但**不阻塞 window.onload 或 DOMContentLoaded**。也就是说，页面 DOM 就绪、JS 执行完、样式计算完毕后，这些图才开始下载——它们的 load 事件会在之后异步触发。
问题在于：如果你的业务逻辑依赖某张 banner 图片的 onload 去启动动画、上报曝光、或切换状态，而这张图又写了 loading="lazy"，那回调大概率晚于预期，甚至因用户快速跳转而 never fired。
- 首屏图应显式设
loading="eager"，或干脆不写（默认即 eager） - 即使你用
decoding="async"优化解码，也无法改变加载时机——它只影响 CPU 解码阶段，不影响网络请求发起点 - SSR 渲染时若服务端误将首屏图标也标记为 lazy，hydration 前可能出现短暂空白，尤其 React/Vue hydrate 未完成时
父容器 transform/visibility:hidden 会让 loading="lazy" 彻底失效
loading="lazy" 依赖浏览器能准确计算元素的几何位置和滚动关系。一旦父级用了 transform（哪怕只是 translateZ(0)）、opacity: 0、visibility: hidden，元素虽仍在文档流中，但其“是否可能进入视口”的判断会被干扰——Chrome 可能直接跳过懒加载逻辑，Safari 则可能永远不触发。
典型场景包括：Tab 切换时用 transform: translateX() 切换面板、模态框初始用 visibility: hidden 隐藏、折叠区域用 opacity 做渐隐。这些都不是 display: none 那种彻底脱离布局，但足以让懒加载哑火。
- 修复方法：改用
opacity: 0+pointer-events: none+ 固定尺寸占位，或用clip-path配合 visibility - 绝对定位元素（
position: absolute/fixed）在部分旧版 Safari 中也无法被正确跟踪，建议避免用于懒加载图片容器 - iframe 内的
<img loading="lazy">在所有主流浏览器中均被忽略——它只对顶层文档有效
原生 loading="lazy" 的核心限制不在语法，而在它把“何时加载”完全交给浏览器黑盒；真正难处理的，是那些看似正常却因视口计算偏差、容器样式干扰或 SSR hydration 时机错位而静默失效的边缘 case。
