loading="lazy" 不会改变 load 事件的语义，只要 iframe 最终完成加载，依然会触发对应事件；但由于懒加载会延后资源请求，因此 load 触发时间也会随之后移。实际开发中，需要先确保 DOM 已经生成，再绑定监听，同时结合 IntersectionObserver 提前判断 iframe 的加载时机。
iframe loading="lazy" 本身不触发 load 事件监听？
并不是不触发。loading="lazy" 的作用，只是告诉浏览器是否延迟加载 iframe 的初始资源（例如 src 指向的页面），它不会影响 load 事件本身的触发规则。换句话说，只要 iframe 最终被加载完成，无论是否启用了懒加载，load 事件都会正常执行。真正需要注意的是：懒加载 iframe 在尚未进入视口前通常不会发起请求，因此 load 事件一定会比普通加载更晚出现，而且也无法通过过早使用 onload 属性来“提前触发”，因为此时元素可能还未解析完成，或者根本还没开始请求。
常见误区是：在 DOM ready 后立即执行 document.querySelector('iframe').addEventListener('load', ...)。这时如果 iframe 仍未开始加载，比如它还在首屏之外，或被 loading="lazy" 延迟了请求，那么即使监听器已经绑定，也只能继续等待触发。这不是浏览器 bug，而是懒加载 iframe 的正常表现。
- 必须先确认 iframe 元素已经存在于 DOM 中，再去绑定
load监听，不能在document.write阶段或动态插入前就添加 listener loading="lazy"在 Safari 15.4+ 和 Chrome 78+ 中可用；旧版本 Safari 或 Firefox 如果不支持该属性，通常会退化成 eager 加载，此时load事件会更早触发- 在服务端渲染（SSR）场景中，如果 iframe 初始
src为空，或者只是占位地址，那么只有后续真正赋值src后，load监听才有实际意义
怎么可靠监听懒加载 iframe 的加载完成？
监听懒加载 iframe 是否完成加载，最可靠的方法依旧是绑定 load 事件，但前提是要配合 DOM 存在性检查，以及必要的加载状态兜底逻辑。不要把 loading 属性当成“当前是否已懒加载完成”的判断依据，因为它只是浏览器的加载提示，并不是状态标记。
实操建议：
- 使用
DOMContentLoaded，或者判断document.readyState === 'complete'，确保 iframe 节点已经被浏览器解析出来 - 为每一个 iframe 单独绑定
load事件，不要尝试使用事件委托，因为 iframe 的load事件不会冒泡 - 同时补充
error监听，避免懒加载失败时（如 404、跨域限制、网络异常）只等load导致状态判断失真 - 如果 iframe 加载完成后还要做进一步交互，例如调用
postMessage，一定要等load触发后再执行，否则iframe.contentWindow可能还是null
示例：
const iframe = document.querySelector('iframe[loading="lazy"]');
if (iframe) {
const handleLoad = () => {
console.log('iframe loaded via lazy');
// 此时可安全调用 iframe.contentWindow.postMessage()
};
iframe.addEventListener('load', handleLoad);
iframe.addEventListener('error', () => console.error('iframe failed to load'));
}
想监听页面滚动触发的懒加载时机？别监听 scroll，用 IntersectionObserver
loading="lazy" 的实现机制本质上与 IntersectionObserver 的思路一致，浏览器会根据元素接近视口的时机来决定何时发起请求。因此，你没有必要，也不建议自己监听 scroll 去模拟 iframe 懒加载逻辑。直接使用 IntersectionObserver 会更准确，性能也更好。
如果你的需求是在 iframe 开始加载之前，而不是在它加载完成之后，先执行一些操作，例如显示 loading 提示、记录埋点、统计曝光等，那么正确做法是监听它进入视口的时刻，而不是只等 load：
- 创建一个
IntersectionObserver实例，rootMargin可以设置为'200px'，以便提前触发，尽量贴近浏览器默认的 lazy loading 行为 - 在回调中检查
entry.isIntersecting，当值为 true 时，说明该 iframe 已接近可视区域，通常即将开始请求资源 - 这时可以先设置
iframe.dataset.status = 'loading'，并配合 CSS 展示骨架屏或加载中状态 - 同一个 iframe 上，完全可以同时使用
IntersectionObserver监听“即将加载”阶段，再用load监听“已完成加载”阶段，两者搭配最稳妥
loading="lazy" 对 JS 动态设置 src 有效吗？
无效。loading="lazy" 只会对 HTML 初始解析阶段就已经存在的静态 src 属性生效。只要你通过 JavaScript 动态执行 iframe.src = '...'，浏览器就会立即发起请求，而不会继续参考 loading 属性。
如果希望通过 JS 创建 iframe 也实现懒加载，就必须手动配合 IntersectionObserver 来控制 src 的赋值时机：
- 初始时不给 iframe 设置真正的
src，只保留一个data-src - 使用
IntersectionObserver监听页面中的该 iframe 何时进入视口 - 当回调触发后，再读取
data-src的值并赋给src，此时才会真正开始加载 - 随后继续绑定
load和error监听，以便跟踪加载完成或失败状态
这是目前最可靠、最可控的做法。浏览器不会自动替你延迟由 JS 动态赋值的 src。
从本质上说，iframe 懒加载并不神秘，它只是把资源请求时机从“HTML 解析完成后立即加载”，改成“用户大概率快要看到它时再加载”。这个时间点，要么由浏览器根据静态 src 自动判断，要么由你通过 IntersectionObserver 手动控制。若是动态 iframe 却没有接入这一层判断，那么严格来说，就不能算真正实现了懒加载。
