ホームページ > ウェブフロントエンド > CSSチュートリアル > 非同期 AJAX リクエスト中に読み込みインジケーターを表示するにはどうすればよいですか?

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

DDD
リリース: 2024-11-17 05:50:03
オリジナル
656 人が閲覧しました

How to Display a Loading Indicator During Asynchronous AJAX Requests?

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

非同期リクエストの進行状況を示すために、読み込み画像を表示できます。リクエストの実行中、画像は表示されたままになり、完了すると消えます。

リクエスト前およびリクエスト後の非表示/表示メソッドの使用

簡単な方法アプローチは、画像の可視性を手動で制御することです:

$('#loading-image').show();

$.ajax({
  url: uri,
  cache: false,
  success: function(html){
    $('.info').append(html);
  },
  complete: function(){
    $('#loading-image').hide();
  }
});
ログイン後にコピー

グローバル Ajax イベントの使用

または、グローバル Ajax イベントを使用して画像の可視性を処理することもできます:

$('#loading-image').bind('ajaxStart', function(){
  $(this).show();
}).bind('ajaxStop', function(){
  $(this).hide();
});
ログイン後にコピー

このメソッドにより、読み込み中の画像がすべての非同期リクエストに対して均一に表示されます。

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

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート