非同期リクエスト中の読み込み中の画像の表示

$.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();
});

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