iframe的loading="lazy"常不生效，因需同时满足：有width/height属性、非display:none、父容器高度不为0、不在首屏、src为真实URL；且仅Chromium和Safari支持，Firefox不支持。
iframe 的 loading="lazy" 为什么经常不生效
因为浏览器只对「明确可判断是否在视口外」的 iframe 启用懒加载，且有严格前提：必须带 width 和 height 属性（或 CSS 尺寸），且不能是 display: none 或父容器高度为 0。很多新手加了 loading="lazy" 却没效果，其实是被当成“不可懒加载”直接忽略。
-
loading="lazy"是 HTML 标准属性，仅支持 Chromium 内核（Chrome/Edge 78+、Opera）和 Safari 15.4+，Firefox 当前（2024）仍不支持 - 若
iframe在首屏内（哪怕只是顶部 1px），浏览器会立即加载，不等滚动 - 没有
src的iframe（比如先写src="about:blank"）不会触发懒加载逻辑——必须是真实可加载的src - 服务端渲染（SSR）或静态生成时，
loading="lazy"会被保留，但实际行为仍取决于客户端浏览器支持度
替代方案：用 IntersectionObserver 手动控制 src 加载
当需要兼容 Firefox、老 Chrome 或更精细控制（比如加载前显示占位图、错误 fallback），就得自己实现懒加载逻辑。核心是监听进入视口后才设置 src。
<iframe
width="600"
height="400"
class="lazy-iframe"
title="第三方内容"
></iframe>
<script>
const iframes = document.querySelectorAll('iframe.lazy-iframe');
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const iframe = entry.target;
const src = iframe.dataset.src;
if (src && !iframe.src) {
iframe.src = src;
}
observer.unobserve(iframe);
}
});
});
iframes.forEach(iframe => observer.observe(iframe));
</script>
- 务必保留
width/height，否则IntersectionObserver可能无法正确计算布局位置 - 推荐用
data-src存原始地址，避免页面初始加载就发请求 - 观察器触发后应立刻
unobserve，防止重复赋值或多次加载 - 如果 iframe 内容依赖父页面样式或 JS 上下文（如跨域通信），需确认加载时机是否影响交互链路
loading="lazy" 和手动方案怎么选
不是非此即彼，而是分层降级：优先写 loading="lazy"，再叠加 IntersectionObserver 作为兜底。现代浏览器走原生逻辑，旧环境自动回退。
- 纯静态页面、无需兼容 Firefox → 直接用
loading="lazy"，最轻量 - 需要加载状态反馈（如骨架屏、loading 动画）→ 必须手动控制，原生
loading不暴露加载生命周期 - iframe 高度动态（比如嵌入评论区，内容长度不确定）→ 原生 lazy 容易误判，手动方案配合
resize或postMessage更可控 - SEO 敏感场景（如嵌入关键产品介绍）→ 懒加载可能延迟搜索引擎抓取，建议首屏 iframe 不懒加载，或用
fetch()预加载 HTML 片段再注入
容易被忽略的跨域与安全细节
无论用哪种方式加载，iframe 的 src 一旦设置，浏览器就会发起请求。但如果目标页设置了 X-Frame-Options: DENY 或 Content-Security-Policy: frame-ancestors 'none'，即使懒加载成功，也会白屏并报错：Refused to display 'xxx' in a frame because it set 'X-Frame-Options' to 'DENY'.
立即学习“前端免费学习笔记（深入）”；
- 这个错误和懒加载无关，但新手常误以为是代码没生效，其实请求已发出，只是被目标站拦截
- 无法通过 JS 捕获该错误（属于渲染层拒绝），只能靠提前沟通或服务端代理绕过（不推荐）
- 若嵌入的是自己维护的子站，确保响应头允许嵌入：
Content-Security-Policy: frame-ancestors https://yourdomain.com - 移动端 Safari 对懒加载 iframe 更保守，有时即使满足条件也会提前加载，测试时务必真机验证
loading="lazy" 很快就不够用了。 
