☰

$.ajax の実行中に読み込み画像を表示する 質問する

tag-icon • tag-icon javascript jquery css
$.ajax の実行中に読み込み画像を表示する 質問する

非同期リクエストが実行中であることを示す画像をどのように表示すればよいか知りたいです。非同期リクエストを実行するには、次のコードを使用します。

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

何か案は？

ベストアンサー1

もちろん、リクエストを行う前に表示し、完了後に非表示にすることもできます。

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

おすすめ記事