Layui如何修改表格内部loading加载动画的图片-Layui教程-PHP中文网

layui表格loading不支持直接设图片路径，仅接受true/false或html字符串；需设loading:false后手动插入自定义dom，或通过css覆盖伪元素content更换图标样式。

不能直接换「图片」——layui 表格的 loading 动画默认是 css 伪元素 + 字体图标（layui-icon-loading-1），压根没用 <img> 标签，所以不存在“改 loading 图片路径”这种操作。真要塞 gif 或 png，得关掉默认 loading，自己手动画 dom。

loading 配置项只接受布尔值或 HTML 字符串，不支持图片路径

Layui 的 loading 参数文档写得很清楚：它只认 true、false，或者一段 HTML 字符串（如 '<i class="..."></i> 加载中'）。传 loading: '/imgs/loading.gif' 这种会被忽略，控制台也不会报错，loading 就直接不显示。

loading: true → 用默认字体图标 + 灰色背景
loading: false → 完全关闭，后续得自己加 DOM
loading: '<img src="/imgs/loading.gif" style="max-width:90%">' → ✅ 可行，但仅限 v2.9.10+，且必须确保该 HTML 能被正确插入到 .layui-table-loading 容器内

想用 GIF/PNG？关掉默认 loading，用 done / error 回调手动控制

这是最稳、兼容所有版本的做法，尤其适合需要精确控制时机（比如分页点击时再显示）或加载失败后展示错误图的场景。

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

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

下载

在 table.render() 中设 loading: false
在 before 回调里插入自定义 DOM，例如：$('#demo').closest('.layui-table-view').prepend('<div class="my-loading"><img src="/imgs/loading.gif"></div>')
在 done 或 error 回调里删掉它：$('.my-loading').remove()
注意：不要插在 #demo 内部（那是 table 标签），要插到它的父容器（.layui-table-view）里，否则定位会乱

CSS 层面覆盖图标，本质是改伪元素 content，不是换图

如果你只是想换个图标样式（比如用蓝色旋转圈代替灰色），而不是真上图片，改 CSS 更轻量：

目标类是 .layui-table-loading i，它用的是 ::before 伪元素 + layui-icon 字体

覆盖方式示例：

.layui-table-loading i::before {
  content: '\e63d' !important; /* 换成其他 layui-icon 编码 */
  color: #009688 !important;
  font-size: 28px !important;
}

别动 layui.css 原文件——升级就丢；把这段加在你自己的 CSS 文件末尾，并确保它在 layui 样式之后加载
如果用了 webpack/vite，检查 CSS 注入顺序，必要时加 @import 或 style 标签手动控制

真正容易被忽略的点是容器定位：哪怕你 HTML 插对了、CSS 写准了，如果表格容器（.layui-table-view）没设 position: relative 且无明确高度，自定义 loading 元素就会脱离上下文，飘到页面顶部或居中盖住整个屏幕。动手前先确认这点，比调十次图标颜色都管用。