loading="lazy"在首屏iframe上完全无效，因浏览器规范强制其立即加载并阻塞HTML解析；真正可控方案是删掉src、用data-src配合IntersectionObserver主动控制生命周期。
loading="lazy" 在首屏 iframe 上不会自动延迟加载，它根本不会生效——浏览器会无视该属性，立刻发起请求并阻塞 HTML 解析。
这是规范行为，不是 bug，也不是兼容性问题。只要 iframe 初始位置在顶层视口内（getBoundingClientRect().top <= window.innerHeight），无论你写没写 loading="lazy"，它都会 eager 加载。
loading="lazy" 在首屏 iframe 中为什么完全无效
- 浏览器强制要求：所有初始位于顶层视口内的
<iframe>必须同步加载，直到其DOMContentLoaded完成，主文档才能继续解析 - Network 面板里能看到：该 iframe 的请求时间戳一定早于主页面的
DOMContentLoaded，且与不加loading="lazy"完全一致 - Safari 15.4+、Chrome、Edge 表现一致；Firefox（截至 2026 年 8 月）仍完全不支持 iframe 的
loading="lazy" - 即使父容器用了
overflow: hidden或transform，只要 iframe 元素本身在顶层视口内，就立即加载
首屏 iframe 滚动时“看似延迟”其实是假象
- 如果你滚动后才看到 iframe 内容，不是因为
loading="lazy"起效了，而是：- iframe 内容本身渲染慢（比如子页面 JS 执行卡顿）
- 子页面资源（图片、脚本）加载延迟
- 父页面 CSS 隐藏了 iframe（如
opacity: 0或visibility: hidden），但 src 已经发出了
- 检查方法：刷新页面后立即打开 DevTools → Network，过滤
iframe请求，看它是否在DOMContentLoaded前就已发出
首屏 iframe 真正可控的延迟加载怎么做
不能靠 HTML 属性，必须用 JS 主动接管生命周期：
- HTML 中删掉
src，改用data-src存真实地址 - 设置占位尺寸和背景（避免 CLS）：
style="width:100%; height:400px; background:#f5f5f5;" - 用
IntersectionObserver监听进入视口，rootMargin建议设为"0px 0px 300px 0px"提前触发 - 回调中赋值
iframe.src = iframe.dataset.src，然后监听iframe.onload - 加载完成后必须调用
observer.unobserve(iframe)，否则滚动来回会重复触发
复杂点在于：这个过程要和骨架屏、错误 fallback、复用逻辑（如 tab 切换）一起设计，单靠一个属性解决不了。
立即学习“前端免费学习笔记（深入）”；
