How to Display a Loading Indicator During Asynchronous AJAX Requests?

Displaying Loading Indicator During Asynchronous Requests

To indicate the progress of asynchronous requests, a loading image can be displayed. While the request is being executed, the image will remain visible and disappear upon completion.

Using the Pre-Request and Post-Request Hiding/Showing Method

A straightforward approach is to manually control the image's visibility:

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

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

Using Global Ajax Events

Alternatively, you can use global Ajax events to handle the image's visibility:

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

This method ensures that the loading image is displayed uniformly for all asynchronous requests.

The above is the detailed content of How to Display a Loading Indicator During Asynchronous AJAX Requests?. For more information, please follow other related articles on the PHP Chinese website!