Show loading image while $.ajax is performed

288,623

Solution 1

You can, of course, show it before making the request, and hide it after it completes:

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

I usually prefer the more general solution of binding it to the global ajaxStart and ajaxStop events, that way it shows up for all ajax events:

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

Solution 2

Use the ajax object's beforeSend and complete functions. It's better to show the gif from inside beforeSend so that all the behavior is encapsulated in a single object. Be careful about hiding the gif using the success function. If the request fails, you'll probably still want to hide the gif. To do this use the Complete function. It would look like this:

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

Solution 3

HTML Code :

<div class="ajax-loader">
  <img src="{{ url('guest/images/ajax-loader.gif') }}" class="img-responsive" />
</div>

CSS Code:

.ajax-loader {
  visibility: hidden;
  background-color: rgba(255,255,255,0.7);
  position: absolute;
  z-index: +100 !important;
  width: 100%;
  height:100%;
}

.ajax-loader img {
  position: relative;
  top:50%;
  left:50%;
}

JQUERY Code:

$.ajax({
  type:'POST',
  beforeSend: function(){
    $('.ajax-loader').css("visibility", "visible");
  },
  url:'/quantityPlus',
  data: {
   'productId':p1,
   'quantity':p2,
   'productPrice':p3},
   success:function(data){
     $('#'+p1+'value').text(data.newProductQuantity);
     $('#'+p1+'amount').text("₹ "+data.productAmount);
     $('#totalUnits').text(data.newNoOfUnits);
     $('#totalAmount').text("₹ "+data.newTotalAmount);
  },
  complete: function(){
    $('.ajax-loader').css("visibility", "hidden");
  }
});

}

Solution 4

I think this might be better if you have tons of $.ajax calls

$(document).ajaxSend(function(){
    $(AnyElementYouWantToShowOnAjaxSend).fadeIn(250);
});
$(document).ajaxComplete(function(){
    $(AnyElementYouWantToShowOnAjaxSend).fadeOut(250);
});

NOTE:

If you use CSS. The element you want to shown while ajax is fetching data from your back-end code must be like this.

AnyElementYouWantToShowOnAjaxSend {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh; /* to make it responsive */
    width: 100vw; /* to make it responsive */
    overflow: hidden; /*to remove scrollbars */
    z-index: 99999; /*to make it appear on topmost part of the page */
    display: none; /*to make it visible only on fadeIn() function */
}

Solution 5

The "image" people generally show during an ajax call is an animated gif. Since there is no way to determine the percent complete of the ajax request, the animated gifs used are indeterminate spinners. This is just an image repeating over and over like a ball of circles of varying sizes. A good site to create your own custom indeterminate spinner is http://ajaxload.info/

Share:
288,623
DarkLeafyGreen
Author by

DarkLeafyGreen

Tackling Complexity in the Heart of Software

Updated on January 16, 2022

Comments

  • DarkLeafyGreen
    DarkLeafyGreen about 2 years

    I am just wondering how to show an image that indicates that the async request is running. I use the following code to perform a async request:

    $.ajax({
      url: uri,
      cache: false,
      success: function(html){
        $('.info').append(html);
      }
    });
    

    Any ideas?

  • Simone
    Simone over 10 years
    Starting jQuery 1.9, AJAX events should be attached to document only. See stackoverflow.com/questions/2275342/…
  • Ana DEV
    Ana DEV almost 7 years
    Thank you for the simple snippet. Time saving @jEremyB
  • Eryk Wróbel
    Eryk Wróbel almost 6 years
    This is much usefull and universal then approved solution. Thank You.
  • Rotimi
    Rotimi over 5 years
    this should be the accepted answer as it is generic!
  • Tung
    Tung about 3 years
    Simple solution but it works like a charm. Thanks a lot!