layer.load() 返回数字索引,必须保存并在对应回调中调用 layer.close() 手动关闭;不可依赖 layer.closeAll('loading') 或 ajaxSetup 统一处理,应按需在 success/fail/done 等明确生命周期钩子中控制。
layer.load() 返回值必须保存,否则关不掉
很多人调用 layer.load() 后发现 loading 一直转,页面卡死——根本原因是没拿到返回值,后续没法调 layer.close()。layui 的 loading 层**不会自动关闭**,必须手动关,而且得关对那个实例。
-
layer.load()返回的是一个数字索引(比如12345),不是 DOM 节点,不能靠 class 或 id 去找 - 如果在异步回调里想关,但变量作用域不对(比如定义在 if 里、没提升到外层),就会关错或报错
Cannot read property 'close' of undefined - 别用
layer.closeAll('loading')图省事:它会干掉所有 loading,包括其他模块正在用的,容易引发竞态问题
正确做法是把索引存到外层变量或闭包里,确保 success/error 回调能访问到:
let loadingIndex;<br>$('#submitBtn').on('click', function() {<br> loadingIndex = layer.load(1, { shade: [0.3, '#000'] });<br> $.post('/api/save', data, function(res) {<br> layer.close(loadingIndex);<br> layer.msg('保存成功');<br> }).fail(function() {<br> layer.close(loadingIndex);<br> layer.msg('保存失败');<br> });<br>});
全局 AJAX 加载动画要慎用 $.ajaxSetup
用 $.ajaxSetup({ beforeSend: ... }) 统一加 loading 看似方便,但实际埋雷不少:它会影响所有 AJAX 请求,包括 layui 内部调用(如 table.render 的分页请求)、第三方插件、甚至浏览器扩展注入的请求。
- 一旦某个请求没走 success/error(比如被拦截、超时未设 timeout、Promise 被 reject 但没 catch),loading 就永远挂着
-
$(document).ajaxStop()不可靠:多个并发请求时,它可能在第一个请求结束就触发,导致 loading 提前关闭 - 移动端弱网下,
complete钩子有时不执行,loading 残留概率更高
更稳的方式是「按需包裹」:只在你明确知道生命周期的业务请求里手动控制。比如表格加载用 done 回调关,表单提交用 success/fail 关,上传用 upload.on('done') 关。
自定义 loading 动画要注意 CSS 覆盖和路径问题
Layui 默认的 loading 是 SVG 动画,想换 GIF 或文字提示,得改两个地方:一是 layer 的 content 配置,二是图标样式。但直接改 .layui-layer-ico16 类容易失效,因为 layui 4.x 后部分版本用的是内联 base64 图标。
- 推荐用
layer.load(1, { content: '处理中...' })配合 CSS 覆盖文字样式,比换图稳妥 - 如果坚持用 GIF,路径必须相对于当前 HTML 页面,不是相对于 JS 文件;用相对路径时建议写成
./img/loading.gif,避免被构建工具误处理 - 别在
success回调里用layero.find()改样式——这个钩子只在 layer 初始化时触发一次,数据回来再改无效
table 表格加载时的 loading 必须配 done 回调关
很多人以为给 table.render() 加了 loading: true 就万事大吉,其实这只是开启「翻页时的内置 loading」,首次渲染或重载(table.reload())并不会自动触发,得自己补。
- 首次加载:必须在
render前手动layer.load(),并在done里关 - reload 场景:
table.reload()不会触发done,得监听done的第二个参数res是否为真实数据,或者用where变更触发重载时,在before钩子里开 loading(需自行维护状态) - 注意:
done是在数据返回后、表格 DOM 渲染完才执行,所以在这里关 loading 是安全的;若在parseData里关,表格还没画出来,用户会看到空白闪一下
复杂点在于异步操作嵌套多层时,loading 的开/关时机容易错位——比如先开 loading,再发请求,请求里又调另一个接口,结果外层关了,里层还在转。这种时候得用计数器或 Promise.all,而不是依赖单一索引。










