success回调是唯一安全插入loading的时机，此时弹窗内容区已挂载但动画未开始，可通过this.querySelector('.layui-layer-content')精准操作DOM，避免使用layer.load()叠加或setTimeout延迟。
layui.open 的 success 回调是唯一安全插入 loading 的时机
直接在 content 字符串里写 <div class="layui-layer-loading"></div> 无效——弹出层 dom 尚未挂载，document.getelementbyid 或 $(...) 都找不到目标节点。必须等 success 回调触发，此时弹窗内容区域已插入文档流、但动画尚未开始，是操作内容区 dom 的黄金窗口。
-
success回调里的this指向弹窗的整个 DOM 元素，可用this.querySelector('.layui-layer-content')精准定位内容容器 - 不要用
setTimeout延迟插入 loading，网络快慢不可控，容易漏掉或卡死 - 若
content是 URL（如['/api/form.html', 'get']），Layui 会异步加载并自动填入，但这个过程不暴露状态；你得自己接管请求，否则无法判断何时“加载完成”
别用 layer.load() 叠在 open 上面
layer.load() 是独立浮层，z-index 默认低于 layer.open()（尤其 Layui 2.8+ 调整后），叠加时极易错位、点击穿透、关闭不同步——比如点遮罩只关掉 layer.load()，留下空白弹窗。移动端 Safari 下还可能完全不响应 touch。
- 禁用
layer.load()+layer.open()并行调用，这不是设计用法 - 如果只是要视觉反馈，可改用
layer.msg('加载中', { icon: 16, time: 0 })，但它不遮罩，也不绑定到弹窗生命周期 - 真正需要遮罩时，loading 必须是
.layui-layer-content的子元素，层级关系才可控
异步加载 content 后怎么正确替换 loading
当 content 是函数或 URL，Layui 不会等返回再渲染弹窗——它先画空框，再发请求填内容。所以 success 里插入的 loading，必须等你自己的请求完成后再移除，不能依赖 Layui 内部行为。
- 把
content改成函数形式：content: function() { return '<div class="loading"><i class="layui-icon layui-icon-loading layui-anim layui-anim-rotate layui-anim-loop"></i></div>'; } - 在
success里发起真实请求（如$.get('/api/data')），用.always()确保无论成功失败都清理 loading - 手动移除 loading 元素：
this.querySelector('.loading')?.remove();，别依赖layer.closeLoading()，它不作用于你插的 DOM - 移动端需确保父容器有
position: relative，且 loading 元素设pointer-events: auto（默认即如此）以阻断操作
样式和动画细节容易被忽略
Layui 自带的 layui-icon-loading 图标默认不旋转，必须显式加 layui-anim layui-anim-rotate layui-anim-loop 才动起来；遮罩层若没设 position: absolute 和 width/height: 100%，会撑不开内容区。
- 遮罩背景建议用半透明白色（
background: rgba(255,255,255,0.8)），比纯黑更柔和 - 图标尺寸可通过 CSS 调整：
.layui-icon-loading { font-size: 24px; } - 如果弹窗内容区本身有
overflow: hidden，loading 元素可能被裁剪，需检查父级样式
.always() 或写错选择器，就会卡在 loading 不动。
