iframe 的 loading="lazy" 在嵌套滚动容器中不触发，因其视口判断始终基于顶层视口而非父级滚动容器，导致在 overflow:auto/scroll 容器内直接退化为 eager 加载。
iframe 的 loading="lazy" 在嵌套滚动容器中为何不触发
它根本不会触发——因为 loading="lazy" 的视口判断永远基于**顶层视口（top-level viewport）**，而不是父级 <div> 或自定义滚动容器。只要 iframe 被包在 <code>overflow: auto / scroll 的容器里，浏览器就无法通过 Intersection Observer 准确计算其相对于“真正滚动区域”的位置，直接退化为 eager 加载。
- 父容器设置了
overflow: hidden、overflow: auto或overflow: scroll，会切断浏览器对元素可视性的布局感知链 - 即使 iframe 自身位置在父容器内“尚未滚动到”，只要它在顶层视口内（比如父容器高度 500px，iframe 静态写在 HTML 开头），就会立刻发起请求
- 使用
transform: translateY()或position: sticky的父级也会干扰坐标映射，导致getBoundingClientRect()返回值失真 - Safari 15.4+ 和 Chrome 对此类嵌套场景的兼容性更差——它们不会 fallback 提示，而是静默忽略
loading="lazy"
嵌套 iframe（src 指向另一个含 iframe 的页面）是否继承 lazy 行为
不继承，且完全不可控。外层 iframe 的 loading="lazy" 只控制自身 src 请求时机；内层 iframe 是否加载、何时加载，由**目标页面自身的 HTML 结构和浏览器对该子文档的独立解析逻辑**决定——你在外层加了 loading="lazy"，对子页面里的任何元素都无影响。
- 外层 iframe 加了
loading="lazy"，但 src 页面本身含首屏 iframe，该子 iframe 仍会立即阻塞子文档的 DOM 解析 - 若外层 iframe 的 src 是同域，某些浏览器（如 Chrome）可能因安全策略限制子文档的懒加载能力
- 跨域子文档中即使写了
loading="lazy"，只要它在子页面的初始视口内，一样被强制 eager 加载 - 无法通过外层 JS 注入或修改子文档的 iframe 属性——同源策略和 iframe sandbox 会拦截
如何检测嵌套场景下 loading="lazy" 是否实际生效
别信 DevTools 的 Network 面板时间戳，要查真实触发逻辑：在页面加载后立即运行一段脚本，检查 iframe 元素是否还保留 loading="lazy" 属性，并手动调用 getBoundingClientRect() 看 top 值是否 > window.innerHeight。如果属性还在但 top ≤ window.innerHeight，说明浏览器已判定其“可视”，loading="lazy" 已被无视。
- 执行
console.log(iframe.loading, iframe.getBoundingClientRect().top, window.innerHeight)—— 若输出"lazy" 120 900，说明理论上应延迟；若输出"lazy" 80 900，则必然立即加载 - Network 面板里看该 iframe 的请求发起时间：早于
DOMContentLoaded→ 肯定没生效；晚于且接近用户滚动动作 → 可能有效 - 在 Safari 中打开「开发者菜单 → 显示 Web 检查器 → Elements 标签页」，右键 iframe → “Reveal in DOM Tree”，观察属性是否被浏览器自动移除（部分旧版 Safari 会直接删掉不识别的属性）
- Firefox 用户可直接放弃检测——它当前（2026年6月）仍不支持
loading="lazy"对 iframe 的任何处理
嵌套滚动中真正可控的替代方案
必须放弃 loading="lazy"，改用 data-src + IntersectionObserver 手动绑定到父容器，否则永远卡在“看似写了，实则白写”的状态。
- 把 iframe 的真实地址存进
data-src，HTML 中只留占位结构：<iframe style="width:100%; height:400px; background:#f5f5f5;"></iframe> - 创建 observer 时显式传入父容器作为
root：new IntersectionObserver(callback, { root: scrollContainer }) -
rootMargin必须带单位且足够激进，例如"0px 0px 200px 0px"（提前 200px 加载），避免滚动过快跳过触发 - 回调中赋值
iframe.src = iframe.dataset.src后，**立刻执行observer.unobserve(iframe)**，防止反复触发 - 加载完成前必须有 skeleton 占位，否则嵌套滚动中白屏会特别突兀
loading="lazy"，在嵌套滚动里连“被读取”的机会都没有。
