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

非同期 AJAX リクエスト中の読み込みインジケーターの表示

プログラミングの領域では、次のような非同期リクエストに遭遇することがよくあります。 $.ajax による。これらのリクエストはバックグラウンドでデータを取得するため、リクエストの処理中もユーザーはアプリケーションとの対話を続けることができます。ただし、特定のシナリオでは、非同期リクエストが現在進行中であることを示す視覚的なフィードバックをユーザーに提供することが望ましい場合があります。

これを実現するには、リクエストのアクティブな状態を示す画像を表示できます。次のコード スニペットは、非同期リクエストを実行する方法の例を示しています。

$.ajax({
  url: uri,
  cache: false,
  success: function(html){
    $('.info').append(html);
  }
});

リクエスト中に読み込み中の画像を表示するには、リクエストが行われる前に画像を表示し、完了後に非表示にすることができます。

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

あるいは、読み込み中のイメージをグローバルな ajaxStart および ajaxStop イベントにバインドする、より一般的な解決策を使用することもできます。このアプローチにより、すべての AJAX イベントに対して読み込みイメージが表示されるようになります:

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

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