javascript - DOMが「待機中」のときに常に表示されるJavaScriptローダーを追加するにはどうすればよいですか？

Question

下の画像に示すように、DOMが読み込まれているときのスピナーを作成したいと思います。

Answer 1

私がしていることは、ページが最初に行うことは、スピナーを表示し、次にwindow.onloadイベントでそれを削除することです。

Answer 2

ウィンドウをオーバーレイするアニメーションGIFを追加し、ドキュメントの準備ができたら削除することができます。これにより、JavaScriptが有効になっていないクライアントが破損します。

Answer 3

http://www.ajaxload.info/から読み込み画像を取得します

デフォルトでdisplay：nonecssで進行状況を表示するdivを追加します

   <div id="progress" style="display:none;">
            <img src="../images/ajax-progress.gif" alt="Loading please wait..." style="display:block; margin-left: auto; margin-right: auto"/>
            <span>Please wait while loading records...</span>
     </div>

あなたのjavascript関数でこのようなことをしてください

function GetData()
{
  //show loading div 
   $('#progress').show();
   $.ajax({
      url: 'ajax/test.html',
      success: function(data) {

      //Hide the progress div if loading data is done
      $('#progress').hide();
      }
   });
}