loading="lazy"对首屏iframe完全无效，必须用data-src+intersectionobserver主动管理；其失效是因浏览器规范限制，仅适用于明显在视口下方且满足宽高、父容器无遮挡等条件的iframe。
loading="lazy" 对首屏 iframe 完全无效，加了反而可能加重阻塞；真正可控的加载时机控制，必须用 data-src + IntersectionObserver 主动管理生命周期。
为什么 loading="lazy" 在 iframe 上经常形同虚设
这不是 bug，是浏览器规范强制行为：只要 iframe 元素初始位置满足 getBoundingClientRect().top （哪怕只露出 1px），HTML 解析器就会立刻发起请求，并阻塞后续 DOM 解析，直到该 <code>iframe 的 DOMContentLoaded 完成。
-
loading="lazy"在 Safari 15.3 及更早、IE、多数安卓 WebView 中直接被忽略，回退为 eager 加载 - Firefox 当前（2026）仍不支持该属性对
iframe的任何延迟效果 - 同域
src（如./chat.html）在多数浏览器中会被跳过 lazy 行为，仅跨域地址（如https://widget.example.com/embed.html）有概率触发 - 带随机参数的
src（如?t=1712345678）或服务端重定向，会导致缓存失效，loading失去意义
哪些条件同时满足时 loading="lazy" 才真正推迟请求
它不是“大概率生效”，而是必须全部满足才起效：
-
iframe在 HTML 中静态声明（非 JS 动态插入） -
src是确定地址，不含查询参数、无重定向链路 - 响应头含
Cache-Control: public, max-age=3600，不能含no-cache或no-store - 元素初始
offsetTop > 2 * window.innerHeight（明显在视口下方） - 父容器未设
overflow: hidden、transform或position: fixed - 显式设置了
width和height属性（或 CSSaspect-ratio），否则会触发 CLS
典型可用场景：<iframe src="help-docs.html" loading="lazy"></iframe> 放在页面底部“帮助中心”模块，或长列表卡片末尾嵌入轻量工具。
首屏 iframe 必须显示？那就别碰 loading 属性
直接删掉 src，改用 data-src 存真实地址，配合占位样式和 IntersectionObserver 控制加载时机：
- HTML 中写：
<iframe style="width:100%; height:400px; background:#f5f5f5;"></iframe> -
IntersectionObserver的rootMargin设为"0px 0px 300px 0px"，提前触发，避免用户刚看到边框才开始加载 - 回调中执行
iframe.src = iframe.dataset.src后，**立刻调用observer.unobserve(iframe)**，否则滚动来回会重复加载 - 监听
iframe.onload再更新状态；若需复用（如 tab 切换），加载完成后加data-loaded="true"标记 - 首次加载前必须加 skeleton 或 loading 提示，否则白块闪动不可接受
广告位、动态插入、同域嵌入等场景的特殊处理
这些情况 loading="lazy" 基本无效，且容易引发业务问题：
- 广告 SDK 动态插入的
iframe—— 浏览器根本不解析其loading属性，Network 面板里仍显示Priority: high - 广告容器必须用
<div class="ad-slot" data-ad-unit="/123/home_top"></div>，不写iframe标签 - 创建
iframe时必须设sandbox="allow-scripts allow-popups"，防止脚本污染主域 -
src注入后，必须手动调用广告 SDK 的refresh()或display()方法，否则不计费也不展示 - 嵌入页自身没优化（如存在 301 跳转、未压缩 JS）时，再怎么延迟加载也救不了体验
最容易被忽略的是：懒加载只管“何时发起请求”，不管“请求回来的内容是否渲染快”。如果嵌入页没做临界资源优化，延迟加载只是把卡顿从首屏挪到滚动后。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
