iframe的loading="lazy"仅延迟其自身html文档加载，对内部图片无效；子页面需自行启用loading="lazy"或intersectionobserver实现图片懒加载。
iframe本身支持loading="lazy"，但内部图片不继承
iframe标签原生支持loading="lazy"，Chrome 76+、Firefox 75+、Edge 79+、Safari 15.4+ 均可用。但它只控制iframe资源本身的加载时机（即是否延迟请求src指向的HTML文档），**对iframe内部的<img>完全无影响**。iframe一旦加载完成，其内部所有图片就按常规规则发起请求——哪怕它们在子页面里也写了loading="lazy"，那只是子页面自己的行为，父页面无法干预。
想让iframe里的图片懒加载，必须从子页面入手
父页面对iframe内容没有控制权，所以“懒加载iframe里的图片”这件事，实际是要求：**确保子页面HTML本身已正确启用懒加载**。这意味着：
- 子页面的
<img>标签必须显式带loading="lazy"属性，且有src和明确宽高（width/height或CSSaspect-ratio） - 子页面不能依赖父页面的JS脚本；若子页面需IntersectionObserver逻辑，必须自己初始化并监听
- 如果子页面由你控制，推荐直接用
loading="lazy"——它比JS方案更轻量，且现代浏览器自动处理滚动预测 - 如果子页面不可控（如第三方广告iframe），那你无法让它内部图片懒加载；此时唯一能做的，是把iframe自身设为
loading="lazy"，延迟整个子页面加载
iframe自身加loading="lazy"的实操要点
这是你能直接控制的唯一有效动作，但容易踩坑：
-
<iframe src="ad.html" loading="lazy"></iframe>—— 必须带src，空src或src="about:blank"会忽略该属性 - 不要给
iframe设display: none或放在overflow: hidden容器里，否则部分浏览器（尤其旧版Safari）可能跳过懒加载判断，直接加载 - 如果iframe用于嵌入关键内容（如首屏视频播放器、登录表单），应显式写
loading="eager"，避免被误延迟 -
loading="lazy"对iframe的触发阈值是固定的（约1250px进入视口前），无法像IntersectionObserver那样用rootMargin自定义；需要更精细控制时，只能靠子页面自己实现
动态插入iframe时，loading="lazy"可能不生效
通过JS创建并插入的iframe，即使代码里设置了loading="lazy"，部分浏览器（如Firefox旧版本）仍可能立即加载——因为DOM插入时机与浏览器懒加载初始化阶段存在竞态。稳妥做法是：
- 优先使用静态HTML写法：
<iframe src="..." loading="lazy"></iframe> - 若必须动态插入，插入后手动检查
iframe.contentDocument是否已加载，再对其中img元素补上IntersectionObserver监听（仅当子页面同源时可行） - 跨域iframe完全无法访问其内部DOM，此时除了控制iframe自身加载时机，别无他法
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
