loading="lazy"对首屏iframe完全无效，因浏览器规范强制立即加载并阻塞dom解析；非首屏需同时满足静态声明、确定src、可缓存响应头、视口外位置等条件才生效。

loading="lazy"对首屏 iframe 完全无效，别白加

加了 loading="lazy" 却发现首屏 iframe 还是立刻请求、卡住 DOM 解析，这不是你代码写错了，是浏览器规范强制行为：只要 <iframe></iframe> 元素在初始视口内（getBoundingClientRect().top ），无论有没有这个属性，都会立即加载并阻塞后续 HTML 解析。你在 Chrome DevTools Network 面板看到的请求时间戳，一定早于主页面的 <code>DOMContentLoaded。

常见误判场景：

• 视觉上“好像不在首屏”，但用了 position: absolute 或负 margin 把 iframe 拉到顶部——它仍是 DOM 首屏元素
• 父容器设了 overflow: hidden 或 transform，干扰浏览器位置判断，懒加载逻辑直接跳过
• Safari 15.3 及更早、IE、多数安卓 WebView 完全忽略该属性，回退为 eager 加载
• Firefox 当前（2026）仍不支持 loading="lazy" 对 iframe 的行为，写了等于没写

非首屏 iframe 用 loading="lazy" 的硬性条件

loading="lazy" 只有在全部以下条件同时满足时，才真正延迟发起请求：

• iframe 在 HTML 中静态声明（不是 JS 动态 document.createElement('iframe') 插入）
• src 是确定地址（不能含 ?t=1712345678 这类随机参数，也不能依赖服务端重定向）
• 响应头包含 Cache-Control: public, max-age=3600（不能是 no-cache 或 no-store）
• 元素初始位置明显在视口下方（例如 offsetTop > 2 * window.innerHeight）
• 父容器没用 overflow: hidden、transform 或 position: fixed
• 显式设置了 width 和 height（或 CSS aspect-ratio），否则加载瞬间触发 CLS

典型可用场景：<iframe src="help-docs.html" loading="lazy"></iframe> 放在页面底部“帮助中心”模块；或长列表中每个卡片末尾嵌入的轻量工具 iframe。

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

首屏必须显示的 iframe 怎么真正延迟加载

不能靠 loading 属性，必须用 data-src + IntersectionObserver 主动控制生命周期：

• HTML 中彻底删掉 src，只留占位样式（如 height: 400px; background: #f5f5f5;）
• IntersectionObserver 的 rootMargin 设为 "0px 0px 300px 0px"，提前触发，避免用户刚看到边框才开始加载
• 回调中把 data-src 赋给 src 后，**立即调用 observer.unobserve(iframe)**，否则滚动来回会重复加载
• 若 iframe 可复用（如 tab 切换），加载完成后加 data-loaded="true"，下次直接 iframe.style.display = "block"
• 务必监听 iframe.onload 再做状态更新；但注意 contentWindow 可能为空，需加空值判断

广告 iframe 或动态插入 iframe 别碰 loading="lazy"

广告位、SDK 注入的 iframe、JS 动态创建的 iframe，loading="lazy" 基本无效——浏览器根本不识别它的 loading 属性。更糟的是，如果同时写了 src 又配了 IntersectionObserver，可能先加载一次 src，再执行 JS 替换，导致两次请求。

正确做法：

• 广告容器用 <div class="ad-slot" data-ad-unit="/123/home_top"></div>，不写 <iframe></iframe>，也不设 src
• 用 IntersectionObserver 监听，threshold: 0.2（20% 可见即触发）
• 触发后手动 document.createElement('iframe')，设 sandbox="allow-scripts allow-popups" 隔离脚本
• 加载完成后调用对应 SDK 的 refresh() 或 display() 方法（如 GAM 的 googletag.pubads().refresh()）

真正容易被忽略的点：loading 属性只对静态 HTML 声明生效，而绝大多数生产环境的 iframe（尤其是广告、监控面板、第三方组件）都是动态插入的——这时候写 loading="lazy" 不仅没用，还可能掩盖真实加载问题。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！