唯一稳定方案是用遮罩层覆盖iframe并在其load事件触发后隐藏；需在设置src前绑定load事件，用css纯动画实现旋转loader，封装函数确保dom就绪、避免重复绑定，跨域不影响遮罩控制。
iframe加载完成前如何显示loading动画
直接在iframe上加loading="lazy"没用，它只控制是否延迟加载，不提供加载中状态。真正可行的方式是用一个遮罩层盖住iframe，等load事件触发后再隐藏——这是唯一稳定、跨浏览器的方案。
怎么监听iframe是否加载完成
iframe的load事件是最可靠的完成信号，但要注意：如果src为空、为about:blank或跨域页面，load仍会触发，但无法读取contentDocument；不过对loading遮罩来说，只要页面开始渲染并结束加载，就该隐藏遮罩。
- 必须在设置
src前绑定load事件，否则可能错过（尤其本地文件或缓存快的场景） - 不要依赖
onreadystatechange，IE已淘汰，现代浏览器不支持 - 避免用
setTimeout模拟“等待”，网络波动下不准确，且容易误关或卡死
旋转进度条HTML+CSS怎么写才轻量不闪屏
用纯CSS实现旋转动画比引入SVG或JS库更可靠，关键点是遮罩必须和iframe尺寸完全重叠，且初始z-index高于iframe，否则动画会被截断或错位。
<div class="iframe-container"> <iframe id="myFrame" src=""></iframe> <div class="loader"></div> </div>
对应CSS里.loader用border画圆 + animation: spin 1s linear infinite，@keyframes spin定义transform: rotate(360deg)。注意给.iframe-container设position: relative，.loader设position: absolute并撑满父容器。
实际代码怎么组织才不容易出bug
最简健壮写法是把src赋值、事件绑定、遮罩显隐全封装在一个函数里，避免DOM未就绪或重复绑定。
- 确保
iframe元素已挂载到DOM再操作，否则addEventListener无效 -
load回调里用event.target而非硬编码getElementById，防止多个iframe时混淆 - 遮罩隐藏用
element.style.display = 'none'，别用remove()，方便下次复用 - 如果
src动态变更（比如切换URL），每次都要重新绑定load并重置遮罩可见性
跨域iframe内容不可读，但这不影响load事件触发和遮罩控制——这点常被误解，其实完全OK。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
