如何使用 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中文網其他相關文章！