jqueryでページ表示中にカーソルを砂時計にしたい

Question

PHPで取得したデータを①テーブル(表)に表示し、②DataTablesに表を整形しているのですが、
データ件数が多い場合に、①の処理で時間がかかります。その間ユーザに明示的に処理中とわからせるために、カーソルを砂時計にしたいです。

下記コードはフォーム表示開始時にカーソルを砂時計にし、
ページ読み込み終了時にカーソルを戻すイメージで作成しましたが、
結果は砂時計になったままで、元に戻りません。
どのようにすればよいのでしょうか。
よろしくお願いします。

$(document).ready(function(){
  document.body.style.cursor = 'wait';
});

window.onload =  function() {
  $("#tbl_result").DataTable({
    order: [[9,"desc"]],
    scrollX: true,
    // 縦スクロールバーを有効にする (scrollYは200, "200px"など「最大の高さ」を指定します)
    scrollY: 600,
    pageLength: 25,//初期表示件数
    lengthMenu: [[25, 50, 100,-1], [25, 50, 100, "全件"]],//表示件数メニュー
    dom: 'Blfrtip',
    buttons: ['copy', 'excel'],
    fixedColumns:   {
        leftColumns: 2
    },
  });
  document.body.style.cursor = 'auto';
};

Comments

[m.ts10806]

処理順をconsole.logなどで確認されました？

Answer 1

初期化完了イベントがあるので使えばいいでしょう。
https://datatables.net/reference/event/init

document.documentElement.style.cursor = 'wait';
$(document).on('init.dt', function(event, settings, json) {
  document.documentElement.style.cursor = 'auto';
});

Comments

[susumu_0414]

ありがとうございます！
DataTables側のイベントとか考えてもいませんでした。
参考にします。

Answer 2

たとえばこう

<script>
window.addEventListener('DOMContentLoaded', function(e){
  console.log(1);
});
window.addEventListener('load', function(e){
  console.log(2);
});
$(function(){
  console.log(3);
});
$(window).on('load',function(){
  console.log(4);
});
</script>

<img src="wait.php">

• wait.php

sleep(5);

※上記、1,3はすぐ表示され、2,4は画面描画後表示されるので5秒後
※ロジックがわかりにくかったので一部ソースを修正

Comments

[susumu_0414]

ありがとうございます。
一番最後にとおるはずの上の４でカーソルをもとに戻す処理を書いているはずなのに、戻らないのがわからない点です。

Answer 3

質問文のコードだけでは再現確認できないのでなんともなのですが、
テーブルを生成する部分を$(document).ready(function()の中に入れたらうまくいかないですかね？

window.onloadとjQueryの$(document).ready等の比較

Comments

[susumu_0414]

ありがとうございます。
参考にさせていただきます。