IE11におけるjQuery.dataTablesで大量行を追加し重くなっても別途用意したNowLoadingのgifアニメを動かし続けるにはどうすればよいでしょう？

jQuery.dataTablesで大量行（2千行ぐらい）を追加する処理があるのですが、その際手持ちのIE11では表示を終えるまで10～20秒かかりました。
そこで、jQuery.dataTablesによる表示処理が完了するまでにはとりあえずNow Loading画面を用意してgif画像によるアニメーションでお茶を濁そうと考えました。
しかしながら、実際にやってみるとNow Loading画面を用意してもgif画像が途中で固まったままjQuery.dataTablesの表示準備が完了して画面切り替えの流れになってしまい、お茶を濁すことすらできず困っています。
jQuery.dataTablesの追加処理と、Now Loading画面のGifアニメをIE11でも並列して動作し続けるにはどうすればよいでしょうか？

なお、Now Loading画面のソースイメージはこんな感じで、jQuery.dataTablesの表示準備前後で表示非表示を切り替えています。

html
1<div id="loader-bg">
2	<div id="loader">
3		<img src="load.gif" alt="Now Loading..." title="Now Loading...">
4		<p>Now Loading...</p>
5	</div>
6</div>

jQuery.dataTablesの方は、ajaxで取得した内容を表示順に配列へ並び替えた上（output_data）で、以下のような感じで一気に反映しています。

javascript
1var display_table = $("#display_table").dataTable().api();
2display_table.clear();
3display_table.rows.add(output_data);
4display_table.draw();

環境は以下の通りです。

OS: Windows 10 Version 1909
ブラウザ: Windows 10付属のIE11
jquery-1.11.1
DataTables 1.10.5

以上よろしくおねがいします。

行動規範の内容に同意します

回答1件

ベストアンサー

ご提示の内容から、やりたいのはこういうことなのかな？と想像してみました。
肝になるのは、

lodingの表示は、データ取得の前に実施
データ表示のコールバック関数内で、データの表示が終了したら、lodingの非表示

の部分になります。

このサンプルで6400件のデータをDataTableに差し込んでおり、Ajaxに2秒のディレイを意図的に入れていますが、
それほど時間はかからないので、いくらIEとはいえ、10秒以上はかなり時間がかかりますね。

IEでは確認できませんが、CODEPENにサンプル作成してあるので、
ほかのブラウザで動かしてみてください。

html
1<link rel="stylesheet" href="https://cdn.datatables.net/t/bs-3.3.6/jqc-1.12.0,dt-1.10.11/datatables.min.css" />
2<script src="https://cdn.datatables.net/t/bs-3.3.6/jqc-1.12.0,dt-1.10.11/datatables.min.js"></script>
3<div class="wrap">
4  <button id="loadStart" style="height:50px; margin-right:20px;">データ表示</button>
5  <img id="loading" style="display: none;width:50px;height:50x;" src="https://media.giphy.com/media/sSgvbe1m3n93G/giphy.gif"/>
6  <hr/>
7  <table id="foo-table" class="table table-bordered">
8    <thead>
9      <tr>
10        <th>index</th>
11        <th>age</th>
12        <th>firstname</th>
13        <th>lastname</th>
14      </tr>
15    </thead>
16  </table>
17</div>

javascript
1$(function() {
2  
3  //このgetData関数は強引に大きめのデータを作成するもので、回答とは直接関係ないです
4  //データベースや、ajaxでデータを取得する関数のイメージです
5  let getData = async function(callBack){
6    let d = []
7    await $.getJSON(
8      'https://next.json-generator.com/api/json/get/NkubeCYTP?delay=2000',
9      function(data) {
10        d = data;
11      });
12    for (let i = 0; i < 6; i++) d = d.concat(d);
13    callBack(d);
14  }
15  
16  //↓ココからが実処理です↓
17  //DataTableの初期化
18  let dt = $("#foo-table").DataTable({
19    columns: [
20      { data: "index" },
21      { data: "age" },
22      { data: "firstname" },
23      { data: "lastname" }
24    ]
25  });
26  
27  //ボタンが押されたときのイベント
28  $("#loadStart").on("click", function() {
29    //ローディングgifの表示と、ボタンの無効化
30    $(this).prop('disabled', true);
31    $("#loading").show();
32    
33    //DataTableのデータクリア
34    dt.clear().draw();
35    
36    //データ取得とコールバック関数の指定
37    getData(function(data){
38      //DataTableにデータ挿入
39      dt.rows.add(data);
40      dt.columns.adjust().draw();
41
42      //ローディングgifの非表示と、ボタンの活性化
43      $("#loadStart").prop('disabled', false);
44      $("#loading").hide();
45    });
46    
47  });
48});