如何用loading.gif遮挡DataTables初始化时的原始表格显示

问题背景 #

基于Django的页面，上传JSON文件后数据存入PostgreSQL，前端用DataTables展示数据，同时有三个D3图表。当前存在以下问题：

• 上传文件后loading.gif提前消失，仍会短暂显示未初始化的原始表格
• D3图表的初始动画被原始表格遮挡
• 需要loading保持到DataTables完全生成，且D3图表仅在表格就绪后渲染

解决方案 #

1. 彻底隐藏原始表格 #

当前仅隐藏#example_wrapper，但未初始化的<table id="example">会先渲染导致闪烁，需直接隐藏原始表格：

#example {
  display: none;
}

同时保留#example_wrapper的visibility: hidden，确保DataTables生成的容器在初始化完成前不显示。

2. 调整loading与表格显示逻辑 #

在DataTables的initComplete回调中，先显示DataTables生成的表格，再隐藏loading，确保顺序正确：

initComplete: function () {
  // 先显示初始化完成的表格
  $('#example').css('display', 'table');
  $('#example_wrapper').css('visibility', 'visible');
  // 再隐藏loading
  $('#loading-indicator').css('display', 'none');
  // 在此处渲染D3图表
  renderD3Charts();
}

3. 延迟D3图表渲染 #

将D3图表的渲染代码封装成函数，仅在DataTables初始化完成后调用，避免页面加载时提前渲染被遮挡。

修改后的完整代码片段 #

CSS部分修改 #

#example_wrapper {
  visibility: hidden;
}
#example {
  display: none; /* 新增：隐藏原始表格 */
}
/* 其他原有样式保持不变 */

DataTables脚本修改 #

$(document).ready(function () {
  $('form').submit(function () {
    $('#loading-indicator').css('display', 'block');
  });

  var table = $('#example').DataTable({
    colReorder: true,
    fixedColumns: false,
    responsive: false,
    paging: true,
    scrollY: '40vh',
    scrollX: true,
    autoWidth: true,
    pageLength: 15,
    dom: 'Bfrtip',
    buttons: [
      {
        extend: 'colvis',
        postfixButtons: ['colvisRestore'],
        text: 'Column Selection'
      },
      {
        text: 'Download CSV',
        extend: 'csv',
        exportOptions: {
          columns: ':visible'
        }
      }
    ],
    columnDefs: [
      { width: '60px', targets: 0, className: 'text-left' },
      { width: '200px', targets: -1, className: 'text-left' }
    ],
    initComplete: function () {
      // 显示初始化完成的表格
      $('#example').css('display', 'table');
      $('#example_wrapper').css('visibility', 'visible');
      // 隐藏loading
      $('#loading-indicator').css('display', 'none');
      // 渲染D3图表
      renderD3Charts();
    }
  });
});

D3图表脚本修改 #

// 封装D3渲染函数
function renderD3Charts() {
  // First chart
  const assign_level_rawData = JSON.parse('{{ assign_levels|safe }}');
  for (let i = 0; i < assign_level_rawData.length; i++) {
    if (assign_level_rawData[i][0] === "N") {
      assign_level_rawData[i][0] = "NA";
    }
  }
  const data1 = assign_level_rawData.map(d => ({level_assign: d[0], count: d[1]}));
  createChart(data1, "chart-level-assign", "Level of Assignment", "level_assign");
  
  // Second chart
  const edu_setting_rawData = JSON.parse('{{ edu_setting_levels|safe }}');
  for (let i = 0; i < edu_setting_rawData.length; i++) {
    if (edu_setting_rawData[i][0] === "N") {
      edu_setting_rawData[i][0] = "NA";
    }
  }
  const data2 = edu_setting_rawData.map(d => ({edu_setting: d[0], count: d[1]}));
  createChart(data2, "chart-edu-setting", "Educational Setting", "edu_setting");

  // Third chart
  const data3 = "{{ smd_combined_csv|escapejs }}";
  const smd = d3.csvParse(data3).filter(d => d.smd_value !== "NA");
  drawDotChart(smd);
}

关键说明 #

• 原始表格用display: none彻底隐藏，避免初始化前的闪烁
• 严格控制顺序：表格就绪→显示表格→隐藏loading→渲染图表
• D3图表延迟渲染，确保其动画效果不会被表格初始化过程遮挡

内容的提问来源于stack exchange，提问作者Beatdown