layer.load()是最直接的全屏loading方式，返回数字索引需保存并在success/error中显式调用layer.close()关闭，避免使用layer.closeAll('loading')，推荐按需包裹并确保每个load对应至少一处close。
layer.load() 是最直接的全屏 loading 方式
用 layer.load() 就能快速弹出一个带遮罩的全屏 loading 层，不需要自己写 css 遮罩或定位逻辑。它默认居中、带灰色半透明背景（shade: [0.3, '#000']），图标是 layui 内置的旋转 svg，开箱即用。
注意两个关键点：
-
layer.load()返回一个数字索引（比如12345），不是 DOM 节点，也不是 jQuery 对象 —— 必须存下来，后续靠它关掉 - 它不会自动关闭，哪怕请求超时、报错、或者用户切走页面，loading 都会一直转，直到你显式调用
layer.close(loadingIndex)
常见错误：只调 layer.load(1) 却没接返回值，后面想关也无从下手；或者在异步回调里变量作用域不对，导致 loadingIndex 是 undefined。
如何确保 loading 一定被关闭
核心原则：每个 layer.load() 调用，必须对应至少一处 layer.close()，且传入原始返回值。不能依赖 layer.closeAll('loading')，尤其在多模块共存或表格分页等场景下，它会误杀其他正在运行的 loading 实例。
推荐写法（以 jQuery AJAX 为例）：
let loadingIndex;
$.ajax({
url: '/api/data',
beforeSend: function() {
loadingIndex = layer.load(1, { shade: [0.3, '#000'] });
},
success: function(res) {
layer.close(loadingIndex);
// 处理数据...
},
error: function(xhr) {
layer.close(loadingIndex);
layer.msg('请求失败', { icon: 2 });
}
});
如果用 Promise（如 fetch 或 axios），也要在 then/catch 里配对关闭。别把 loadingIndex 定义在 if 或函数内部，否则回调拿不到。
自定义样式：改背景、大小、文字和图标
默认 loading 的文字是 “加载中”，图标小、颜色固定。要调整，主要靠 layer.load() 的配置项：
-
content：可传字符串（如'正在提交...'）或 HTML 片段（需注意 XSS） -
shade：数组格式，如[0.5, '#fff']表示 50% 透明度白色遮罩 - 图标无法直接换，但可通过覆盖 CSS 强制改尺寸或颜色：
.layui-layer-ico16 { font-size: 28px; color: #009688; } - 不想要遮罩？设
shade: 0；想让 loading 更窄？加area: ['200px', '100px']（但注意这会破坏“全屏”语义）
慎用 layer.load(2) 或 layer.load(3)：它们是不同风格的 loading，但 2/3 在部分 Layui 4.x 版本中已被弃用或表现不稳定，坚持用 1 最稳妥。
避免和 layui 内部 loading 冲突
如果你在用 table.render()、form.on('submit') 或 upload.render()，这些组件内部可能已调用过 layer.load()。此时若再全局用 $.ajaxSetup({ beforeSend }) 统一加 loading，极易出现嵌套遮罩、重复动画、或关不干净的问题。
更可靠的做法是「按需包裹」：
- 表单提交：在按钮 click 里手动
layer.load()，在success/error回调里关 - 表格重载：用
table.reload()的done回调关 loading - 文件上传：在
upload.on('before', ...)开，在'done'或'error'关
真正容易被忽略的是：移动端弱网下，complete 钩子有时根本不触发，所以不要把关闭逻辑只押在 complete 上；success 和 error 是更确定的关闭时机。
