如何在jQuery执行其他操作时显示loader.gif加载动画？

云上老周

2026-8-13

问题分析

浏览器的UI渲染与JavaScript执行共享主线程，同步代码会阻塞渲染流程。你的代码中，$('.loader').show()触发后立刻执行大量DOM隐藏操作，浏览器需等待所有同步代码执行完毕才会重绘页面，导致加载动画要等到列隐藏完成后才显示。

解决方案

方案1：将DOM延迟操作放入下一个事件循环

利用setTimeout把列隐藏逻辑放到下一个事件队列，让浏览器先完成加载动画的渲染，再执行后续操作：

$(".removeButton").eq(i).click(function() {
  $('.loader').show(); // 先触发加载动画显示

  // 延迟执行列隐藏逻辑，给浏览器留足渲染时间
  setTimeout(() => {
    let tbodyTrLength = $(".table-hideable tbody tr").length;
    
    for (let t = 0; t < tbodyTrLength; t++) {
      $(".table-hideable tbody tr").eq(t).find("td").eq(i).hide();
      $(".table-hideable thead tr:nth-child(2) th").eq(i).hide();
    }
    $(".footer-restore-columns").removeClass("d-none");
  }, 0);
});

方案2：优化DOM操作减少阻塞

你当前的循环存在重复DOM查询问题，会延长代码执行时间、加重阻塞。可以提前缓存目标节点，简化操作：

$(".removeButton").eq(i).click(function() {
  $('.loader').show();

  // 提前缓存所有需要隐藏的单元格，避免循环内重复查询DOM
  const targetTds = $(".table-hideable tbody tr td:nth-child(" + (i+1) + ")");
  const targetTh = $(".table-hideable thead tr:nth-child(2) th").eq(i);
  
  setTimeout(() => {
    targetTds.hide();
    targetTh.hide();
    $(".footer-restore-columns").removeClass("d-none");
  }, 0);
});

直接通过选择器匹配所有目标列的单元格，无需逐行遍历，代码更简洁且执行效率更高，能进一步缩短阻塞时长。