jQuery AJAX リクエスト中に読み込みインジケーターを表示するにはどうすればよいですか?

$.ajax リクエスト中の読み込みインジケーターの表示

質問:

非同期リクエスト中に視覚的なインジケーターを表示するにはどうすればよいですか? HTTP リクエストは $.ajax を使用して行われています?

回答:

非同期リクエストが処理されていることを示すには、イメージの読み込みを利用できます。そのための 2 つの方法を次に示します。

方法 1: インライン表示コントロール

リクエストの前に読み込み中の画像を表示し、リクエストの完了後に非表示にします。

$('#loading-image').show();
$.ajax({
  url: uri,
  cache: false,
  success: function(html){
    $('.info').append(html);
  },
  complete: function(){
    $('#loading-image').hide();
  }
});

方法 2: グローバル イベント バインディング

読み込み中の画像表示をグローバル ajaxStart および ajaxStop イベントにバインドします。このアプローチでは、すべての ajax リクエストの画像が切り替わります:

$('#loading-image').bind('ajaxStart', function(){
  $(this).show();
}).bind('ajaxStop', function(){
  $(this).hide();
});

以上がjQuery AJAX リクエスト中に読み込みインジケーターを表示するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。