loading="lazy"对非首屏iframe仅在同时满足静态声明、确定src、有效缓存头、足够视口偏移、显式宽高及无干扰样式等全部条件时才生效；多数场景因不满足任一条件而失效，真正可控方案是data-src配合IntersectionObserver手动管理生命周期。
加 loading="lazy" 对非首屏 iframe 确实能减少初始请求数，但效果非常有限——它只在满足全部硬性条件时才真正延迟加载，多数场景下等于没写。
为什么 loading="lazy" 在滚动长页时经常失效
浏览器对 iframe 的懒加载限制比 <img> 严格得多，常见失效原因包括：
-
src是同域地址（如./dashboard.html），部分浏览器直接忽略 lazy，走 eager 加载 - iframe 高度为 0 或未设
width/height，浏览器无法计算布局位置，Intersection Observer 判定失败 - 父容器用了
overflow: hidden、transform或position: fixed，干扰视口判断 - 页面已滚动过目标位置再插入 iframe ——
loading属性只在 DOM 初始解析时生效，JS 动态插入无效 - Safari 15.3 及更早、IE、多数安卓 WebView 完全不支持该属性，回退为 eager
非首屏 iframe 怎么安全用 loading="lazy"
它只在同时满足以下全部条件时才真正起效：
- 必须是静态 HTML 中声明的 iframe（不是 Vue
v-for、Reactmap()或 JS 拼接后innerHTML插入） -
src是确定地址，不能带随机参数（如?t=1712345678）或服务端重定向 - 响应头含
Cache-Control: public, max-age=3600，否则缓存失效，请求照发 - 元素初始
offsetTop明显大于window.innerHeight * 2，即足够远离首屏 - 显式设置
width和height（或 CSSaspect-ratio），否则加载瞬间触发 CLS
滚动中真正可控的方案：data-src + IntersectionObserver
这是目前唯一能绕过浏览器强制 eager 行为、配合业务逻辑（如 tab 切换、广告计费）的路径。关键不是“用了 Observer”，而是初始化和清理是否严谨：
立即学习“前端免费学习笔记（深入）”；
- HTML 中彻底删掉
src，只保留data-src和占位样式（如height: 400px; background: #f5f5f5;） -
IntersectionObserver的rootMargin设为"0px 0px 400px 0px"，提前 400px 触发，避免用户看到边框才开始加载 - 回调中把
iframe.dataset.src赋给iframe.src后，立即调用observer.unobserve(iframe)，否则滚动来回会重复加载 - 务必监听
iframe.onload再更新 UI；若 iframe 可复用（如 tab 切换），加载完成后加data-loaded="true"，下次直接iframe.style.display = "block"
最容易被忽略的是：懒加载只控制“何时发起请求”，不解决 iframe 内部页面本身慢的问题。如果嵌入页没做资源懒加载、没压缩 JS、没设 DOMContentLoaded 临界资源，再怎么延迟也救不了体验。
