jQuery を使用して AJAX リクエスト中に読み込み中の画像を表示するにはどうすればよいですか?

Ajax 実行中のロード画像の表示

非同期リクエストの実行を示すために、ロード画像の表示が望まれることがよくあります。 jQuery の $.ajax メソッドを使用してこれを実現する方法を見てみましょう。

画像の紹介

望ましい動作には、進行中のリクエストを示す画像の表示が含まれます。簡単な HTML 設定は次のとおりです。

<img>

AJAX リクエストのカスタマイズ

$.ajax リクエストを目的の視覚化で拡張するには、以下を含める必要があります:

• 前に読み込み中の画像を表示するリクエスト: 読み込み中の画像を表示するには、fadeIn() または show() メソッドを使用します。
• 完了後に読み込み中の画像を非表示にする: fadeOut() または hide() を使用します。リクエストの終了後に読み込み中の画像を削除するメソッド。

カスタマイズされた AJAXリクエスト:

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

イベントベースのアプローチ

代替アプローチでは、グローバルの ajaxStart および ajaxStop jQuery イベントを利用します。これにより、すべての AJAX イベントの非同期視覚化が可能になります。

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

これらの手法を実装することで、開発者は読み込み中の画像を効果的に表示して、非同期リクエスト中に視覚的なフィードバックを提供できます。

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