必须在<body>最顶部用HTML+CSS插入固定定位遮罩，通过layui.config({done:fn})回调移除，而非layui.use或layer.load()；layer.load()仅适用于局部操作反馈。
用 layui.use 加载完模块后手动插入遮罩 DOM
layui 本身不提供“页面加载完成前自动全屏遮罩”的内置机制，layui.use 是异步加载模块的入口，但它的执行时机在 dom 已渲染、js 开始运行之后——此时页面早已可见。所以不能靠它“挡住初始白屏”，必须自己在 <body> 开头就插入遮罩元素。
常见错误是等 layui.use(['layer'], ...) 执行后再用 layer.load()，结果动画一闪而过，或者根本没遮住首屏内容。
- 在 HTML 的
<body>最顶部立即写一个固定定位的遮罩：<div id="loading-mask" style="position:fixed;top:0;left:0;width:100%;height:100%;background:#fff;z-index:999999;display:flex;align-items:center;justify-content:center;"><i class="layui-icon layui-icon-loading layui-icon-spin"></i></div>
- 不要依赖
layer模块来创建这个遮罩，它可能还没加载；纯 HTML + CSS 更可靠 - 如果用了自定义字体图标或动画，确保
layui.css已提前引入（放在<head>）
遮罩何时移除：监听 layui.config 的 done 回调
Layui 提供了全局配置完成后的钩子 layui.config({ done: fn })，它比 layui.use 更早触发，且能确保基础模块（如 jquery、layer）已就绪，适合做“收尾操作”。这里才是移除遮罩的安全时机。
注意：不能用 $(document).ready() 或 window.onload，前者太早（Layui 还没初始化），后者太晚（可能已出现闪动）。
- 在引入
layui.js后立即调用：layui.config({ done: function() { document.getElementById('loading-mask').remove(); } }); - 如果项目里用了
layui.extend或自定义模块，done仍会等所有扩展注册完毕才触发，放心用 - 避免在
done里再调用layui.use去移除遮罩——绕远路，也容易因异步导致时序错乱
layer.load() 不适合做首屏遮罩，只适合局部操作反馈
layer.load() 是一个带旋转图标的浮层，但它依赖 layer 模块加载完成，并且默认挂载在 body 下、z-index 较低（约 1989），无法覆盖浏览器地址栏下方的整个视口，尤其在移动端常被截断或错位。
典型误用场景：用户想“一打开页面就转圈”，结果只看到右上角一个小图标，或者遮罩一闪就消失。
-
layer.load(2)的参数仅控制图标大小（1~3），不影响定位或层级，别指望它铺满屏幕 - 它的 DOM 是动态生成的，插入时机不可控；而首屏遮罩必须是静态、同步、高 z-index 的
- 若需在某个按钮点击后显示加载态，
layer.load()完全合适；但和“页面加载动画”是两回事
兼容性与性能注意点：CSS 动画别卡在重排上
遮罩里的旋转图标如果用 transform: rotate() 配合 transition，在低端安卓机上可能掉帧。Layui 自带的 layui-icon-spin 类用了 animation，但部分旧版 WebView 对 @keyframes 支持不稳定。
更稳妥的做法是用 CSS animation 显式声明，避免依赖框架内部实现。
- 给遮罩内的图标加
will-change: transform提前提示渲染引擎优化 - 避免在遮罩元素上设置
box-shadow或渐变背景，这些在某些 Android 4.x 上会强制软件渲染 - 如果项目要支持 IE11，
flex居中需补display: -ms-flexbox，否则遮罩内容会偏顶
真正难的不是加个遮罩，而是让它从第一帧开始就稳稳盖住内容，不闪、不抖、不等 JS —— 这要求你把 DOM 和样式前置到 JS 运行之前，而不是交给框架去“补救”。
