非同期 AJAX リクエスト中に読み込み中の画像を表示するにはどうすればよいですか?

非同期リクエスト中の読み込み中のイメージの表示

$.ajax を使用して非同期リクエストを実行すると、進行中のプロセス。この記事では、このようなリクエスト中に読み込み中の画像を表示する手法について説明します。

まず、提供されたコード スニペットは URL への非同期リクエストを実行し、受信した HTML をクラス「info」を持つ要素に追加します。読み込み中の画像を表示するには、「id」が「loading-image」の画像要素を使用できます。

1 つの方法は、リクエストを行う前に画像を表示し、完了後に非表示にすることです。

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

より一般的なアプローチは、読み込みイメージをグローバルの ajaxStart イベントと ajaxStop イベントにバインドすることです。このようにして、すべての非同期リクエストに対して画像が表示されます。

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

これらの手法により、進行中の非同期リクエストがわかりやすく表示され、ユーザー エクスペリエンスが向上します。

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