最轻量可控的骨架屏实现是在table.render()前手动插入DOM占位结构，done回调中移除骨架并延时resize；需关闭默认loading，确保骨架与最终表格尺寸严丝合缝。
直接在 table.render() 初始化前渲染骨架屏，等 done 回调触发后再移除——这是最轻量、最可控的实现方式，不需要额外依赖或重写模块。
初始化前手动插入骨架结构
骨架屏不是靠 CSS 动画“模拟加载”，而是用真实 DOM 占位。Layui 表格容器本身是空的，你得在调用 table.render() 前就往里面塞占位元素。
- 先清空表格容器：
$('#demo').empty() - 再插入骨架 HTML（比如 5 行灰色横线 + 圆形头像占位）：
$('#demo').html('<div class="skeleton-row">...</div> <div class="skeleton-row">...</div>') - 确保该 HTML 结构宽度/高度与最终表格一致，避免重排（尤其 IE11 下要设
table-layout: fixed）
done 回调里清理骨架并校准渲染
Layui 的 done 是数据加载完成、DOM 已插入后的钩子，但此时表格尺寸可能未完全稳定，尤其带固定列或滚动条时容易错位。
- 在
done里先移除骨架：$('#demo').find('.skeleton-row').remove() - 加个
setTimeout(() => table.resize(), 10)，让浏览器有时间完成重排后再对齐列宽 - 不要在
done里操作原始数据或重赋值data字段——这会触发二次渲染，导致闪动
关闭默认 loading，避免双加载态叠加
Layui 默认开启 loading: true，会显示一个遮罩层加旋转图标。它和骨架屏逻辑冲突：用户既看到灰色占位块，又看到半透明遮罩，体验割裂。
- 显式设置
loading: false，把控制权完全交给骨架屏 - 如果需要更轻量提示，可用
layer.load(1, { shade: [0.1, '#fff'] })在表格区域上方浮一层极淡遮罩，300ms 后自动 close - 注意：IE11 下
layer.load遮罩可能不居中，建议只在现代浏览器启用
真正难的不是写几行骨架 HTML，而是让骨架结构的尺寸、行高、列宽和最终表格严丝合缝——差 1px 都会导致视觉跳变。建议把骨架样式抽成 SCSS 变量，和 .layui-table-cell 的 padding、font-size、line-height 保持联动。
