避免表格加载时布局抖动的正确做法是预先渲染表头和空tbody（含占位tr），用绝对定位遮罩层配合linear-gradient骨架动画，并通过toggletableloading原子化控制状态。
表格加载中时如何避免布局抖动？
直接给 <table> 加 <code>opacity: 0.5 或 visibility: hidden 会导致内容消失后高度塌陷，后续数据渲染时页面“跳一下”。正确做法是保持表格结构占位：用 pointer-events: none 锁定交互，配合 opacity 和 transition 实现渐变遮罩，同时确保 <tbody> 始终存在（哪怕为空）。<p>常见错误是等 AJAX 返回后再插入整个 <code><table>，这必然引发重排。应预先渲染表头和空 <code><tbody>，仅更新数据行。<ul><li>表头 <code><thead> 必须提前写死，不可动态生成<li>空 <code><tbody> 至少包含一个带 <code>colspan 的占位 <tr>，防止高度为 0<li>加载状态层需用 <code>position: absolute 叠在表格上方，且父容器设 position: relative
用 CSS @keyframes 实现骨架屏式加载动画
纯 CSS 骨架屏比 GIF 更轻量、可缩放，且能匹配表格列宽。关键在于用 linear-gradient 模拟高亮条扫过效果，并通过 background-size 和 background-position 控制动画节奏。
示例中，给加载遮罩层添加如下样式：
.table-loading {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(0,0,0,0.05), transparent);
background-size: 200% 100%;
animation: loading-shimmer 1.5s infinite;
}
<p>@keyframes loading-shimmer {
0% { background-position: -200% 0; }
100% { background-position: 200% 0; }
}</p>
注意：动画需作用于遮罩层而非表格本身，否则会干扰表格内文字渲染；background-size 设为 200% 100% 是为了让渐变区域足够宽，实现平滑扫过感。
JavaScript 控制加载状态的最小必要逻辑
状态切换必须原子化，避免多次调用 showLoading() / hideLoading() 导致 class 冲突。推荐用单个布尔值标记当前状态，并封装成函数：
function toggleTableLoading(isLoading) {
const table = document.querySelector('#data-table');
const overlay = table.querySelector('.table-loading');
<p>if (isLoading) {
table.classList.add('loading');
overlay.style.display = 'block';
} else {
table.classList.remove('loading');
overlay.style.display = 'none';
}
}</p>
容易被忽略的点：
- 务必检查
overlay是否已存在，首次调用toggleTableLoading(true)时若未预置 DOM，需动态创建 - AJAX 请求失败时也要调用
toggleTableLoading(false)，否则用户卡在加载态 - 不要在
fetch().then()里直接操作 DOM，先校验response.ok，再更新表格
移动端表格加载动画的适配要点
小屏幕下，横向滚动的表格常因加载遮罩层宽度不足导致右侧漏出空白。此时不能简单设 width: 100vw，而应让遮罩层跟随表格实际滚动宽度。
解决方案是监听 scroll 事件并同步设置遮罩层 transform: translateX()，但更稳妥的做法是将遮罩层包裹在 <div class="table-container"> 内，并让该容器负责 overflow 和定位：<pre class="brush:php;toolbar:false;">.table-container {
position: relative;
overflow-x: auto;
}
<p>.table-loading {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
/<em> 不设 transform，靠父容器 overflow 自动裁剪 </em>/
}</p></pre>
<p>这样即使表格内容超出视口，遮罩层也会随容器自然滚动覆盖，无需 JS 干预。</p>
<p>复杂点在于混合使用固定表头和横向滚动时，遮罩层需分层处理：上层盖住 <code><thead>，下层盖住 <code><tbody>，否则滚动时会出现遮罩错位。这种场景建议改用 <code>backdrop-filter: blur(2px) 替代纯色遮罩，视觉容错更高。
