避免 iframe 加载空白闪烁的核心是用 about:blank 占位并延迟赋真实地址，配合 loading 遮罩、资源预加载优化及动态创建 iframe 节点。
去掉 iframe 加载时的空白闪烁，核心是避免“先显示空 iframe、再加载内容”这个视觉断层。Layui 默认行为就是立即插入 iframe 标签并设 src，网络延迟或页面渲染慢时，用户就会看到几帧白屏或默认背景色。
用 about:blank 占位 + 延迟赋真实地址
这是最直接有效的做法：先让 iframe 加载一个确定能秒开的空页，绑定好事件后再换真实 URL，确保 onerror 和 onload 都能稳定触发。
- 在 success 回调里拿到 iframe 元素后，立刻设
iframe.src = 'about:blank' - 紧接着绑定
onerror和onload事件 - 最后再把真实地址赋给
src，真正触发加载
示例代码：
layer.open({type: 2,
content: '/user/edit.html',
success: function(layero, index) {
const iframe = layero.find('iframe')[0];
if (!iframe) return;
iframe.src = 'about:blank';
iframe.onerror = () => {
layer.msg('页面加载失败', { icon: 2 });
layer.close(index);
};
iframe.onload = () => {
// 可选：加载完成后自动适配高度
layer.iframeAuto(index);
};
iframe.src = '/user/edit.html'; // 此刻才开始加载目标页
}
});
加 loading 层遮罩，掩盖加载过程
用户感知不到白屏，是因为视线被遮住了。可在 iframe 插入后、加载完成前，盖一层半透明 loading 提示。
- 在 success 中用
layer.load(2, { shade: [0.1, '#fff'] })显示轻量 loading - 在 iframe 的
onload或onerror里调用layer.closeLoad()关闭 - 注意：不要用
layer.msg或layer.alert，它们会打断操作流
预加载关键资源，缩短首屏时间
闪烁本质是加载慢。如果目标页面本身体积大、依赖多，光靠前端遮掩治标不治本。
- 服务端开启 gzip / brotli 压缩，特别是 HTML 和 JS
- 目标页面内联关键 CSS，推迟非首屏 JS（如用
defer或动态 import） - 若页面含 Layui 组件，确认没重复加载 layui.js —— 子页应复用父页已加载的实例
- 对静态资源（图标、字体）使用 CDN，并设置合理缓存头
禁用浏览器对 iframe 的预解析干扰
某些浏览器会在 iframe 插入 DOM 后立即尝试预加载 src，即使你还没赋值。可通过动态创建 iframe 节点来规避。
- 不用
type: 2自动创建，改用type: 1+ 手动拼 iframe 标签 - 在 success 中创建 iframe 元素、设
src="about:blank"、绑定事件，再 append 到 layer 内容区 - 最后再设真实 src —— 整个过程完全可控，无隐式行为
