How Can I Show a Loading Indicator During jQuery AJAX Requests?

Showing Loading Indication During $.ajax Requests

Question:

How can I display a visual indicator while an asynchronous HTTP request is being made using $.ajax?

Answer:

To indicate that an asynchronous request is being processed, you can utilize loading images. Here are two methods to do so:

Method 1: Inline Display Control

Show the loading image before the request and hide it after the request completes:

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

Method 2: Global Event Binding

Bind the loading image display to global ajaxStart and ajaxStop events. This approach will toggle the image for all ajax requests:

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

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