1. ホーム
  2. javascript

[解決済み] $.ajax実行中にローディングイメージを表示する

2022-07-18 06:05:05

質問

非同期リクエストが実行されていることを示す画像を表示する方法について教えてください。私は以下のコードを使用して非同期リクエストを実行します。

$.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イベントにそれをバインドする、より一般的な解決策を好みます。

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