loading="eager"对<iframe>无效，因其首屏加载本就是强制同步行为，且主流浏览器忽略该属性；真正可控加载需用data-src+IntersectionObserver方案。
loading="eager" 对 <iframe> 标签根本不起强制作用——它本来就是默认行为，写了等于没写。
为什么loading="eager"在<iframe>上无效
浏览器规范强制所有首屏 <iframe> 必须 eager 加载：只要 getBoundingClientRect().top <= window.innerHeight，无论是否声明 loading="eager"，都会立刻发起请求，并阻塞 HTML 解析直到该 iframe 的 DOMContentLoaded 完成。这不是兼容性问题，而是设计如此。
- 你在 Network 面板看到的 iframe 请求时间戳，一定早于主页面的
DOMContentLoaded -
loading="eager"在 Safari、Firefox、IE 和多数安卓 WebView 中被直接忽略（Safari 15.3 及更早；Firefox 至今不支持该属性对 iframe 的任何控制） - 哪怕你删掉所有其他属性、只留
<iframe src="a.html" loading="eager"></iframe>，效果和不写完全一样
想真正“强制加载”，其实只有两种场景需要干预
所谓“强制”，本质是解决「本该加载却没加载」或「不该卡住却卡住了」的问题，而不是靠 loading 属性触发：
- 非首屏 iframe 却因缓存头缺失（如
Cache-Control: no-cache）或带随机参数（src="x.html?t=123"）导致反复重拉——这时要删参数、加Cache-Control: public, max-age=3600 - 首屏 iframe 因父容器用了
transform、overflow: hidden或position: fixed，被浏览器误判为“不在视口内”，反而延迟了加载——这时得改样式，或手动触发iframe.src = iframe.dataset.src
真要可控加载，必须放弃src直写
所有稳定、可复用、跨浏览器的方案，都基于一个前提：初始 HTML 中不写 src，只留 data-src。
立即学习“前端免费学习笔记（深入）”；
- HTML 写成：
<iframe style="height:400px;background:#f5f5f5;"></iframe> - 用
IntersectionObserver监听进入视口（rootMargin: "0px 0px 300px 0px"提前触发） - 回调里赋值
iframe.src = iframe.dataset.src后，**立刻执行observer.unobserve(iframe)**，否则滚动来回会重复加载 - 监听
iframe.onload而非isIntersecting，因为进入视口 ≠ 内容已就绪
最常被忽略的点：你以为 iframe 在首屏，但它可能被 scroll-margin 推出检测范围，或被 transform 移出布局流——用 document.elementFromPoint() 实时验证位置，比猜靠谱得多。
