Layui表格异步加载数据时显示自定义加载动画怎么做-Layui教程-PHP中文网

需禁用默认loading（loading: false），在request函数中手动控制自定义动画的显示与隐藏，通过elem.append插入HTML并在complete/final中清理，parseData不可用于loading控制。

layui table 异步加载时怎么替换默认 loading 动画

直接改 loading 配置项没用——layui 的 table.render() 默认不支持自定义 loading dom，它只认内置的转圈图标。真要换动画，得绕过它的 loading 控制逻辑，自己接管状态。

核心思路是：禁用 Layui 自带 loading（loading: false），在 request 和 parseData 里手动控制容器的 loading 状态，插入你自己的 HTML 动画。

loading: false 关掉默认动画，否则会和你的冲突
用 elem 找到表格容器（比如 $('#demo')），在请求前显示自定义 DOM，在响应后隐藏
推荐把动画 HTML 写成内联样式，避免依赖额外 CSS；用 position: absolute + z-index 盖在表格上
注意：必须在 request 函数里发请求，不能只靠 url 配置，否则拿不到请求时机

request 函数里怎么手动触发和关闭 loading

request 是唯一能精确控制“请求开始”和“响应结束”的钩子。Layui 在这里只负责传参，不干涉你的 fetch / axios 调用过程，所以你可以自由加 loading 显示/隐藏逻辑。

常见错误是只在 success 回调里 hide，忘了 error 或 finally 也要 hide——否则网络失败后动画卡住不动。

请求发起前：用 $(elem).append(...) 插入 loading 元素，或用 addClass('loading-active') 触发 CSS 动画
无论成功失败，都要在 then / catch / finally 里移除或隐藏它
别用 setTimeout 模拟延迟来测试——真实接口可能秒回，loading 闪一下就消失，反而难调试
如果表格启用了 height，记得 loading 元素也要适配高度，否则会被裁剪

request: function(obj, success, fail) {
  const elem = $('#demo'); // 表格容器
  elem.append('<div class="my-loading">加载中...</div>');
  
  $.ajax({
    url: '/api/data',
    data: { page: obj.page, limit: obj.limit },
    dataType: 'json',
    success: function(res) {
      success({ data: res.data, count: res.count });
    },
    error: function() {
      fail('请求失败');
    },
    complete: function() {
      elem.find('.my-loading').remove(); // 必须清理
    }
  });
}

为什么 parseData 里不能操作 loading

parseData 只在数据解析阶段执行，此时请求早已完成，DOM 还没更新，loading 状态早该结束了。在这里操作，要么无效，要么造成二次隐藏/显示错乱。

深蓝色网站后台管理系统layui框架模板-AdminPro

一款深蓝色网站后台管理系统layui框架模板

下载

更隐蔽的问题是：如果接口返回格式异常（比如字段名不对、JSON 解析失败），parseData 根本不会被调用，loading 就永远挂着。

parseData 的职责只是把原始响应转成 Layui 认的结构：{data: [...], count: 100}
它不接收 DOM 元素，也不暴露请求上下文，没法反向控制 loading
所有 loading 状态管理必须收口到 request 函数内部，保持单一入口
如果要用 Promise 风格，确保 complete 或 finally 是最终兜底清理点

兼容性与性能要注意什么

Layui 2.8+ 对 request 支持更稳，但老版本（如 2.5.6）里 obj 缺少 page/limit 字段，得从 URL 参数里手动解析。动画本身影响不大，但 DOM 操作频繁可能卡顿。

避免在 loading 元素里放复杂 SVG 或大量 DOM 节点，移动端容易掉帧
如果表格启用了 scrollbar 或 fixed 列，loading 容器需用 position: absolute 并设置 top/left/right/bottom 覆盖全区域
IE11 下 flex 布局的 loading 居中可能失效，建议用 text-align: center + line-height 或绝对定位
多个表格共存时，每个都要独立管理 loading 元素，别用全局 class 名互踢

最麻烦的其实是表格重载（table.reload()）——它不会自动触发 request，得手动再调一次 loading 显示逻辑。这点很容易漏。