Loading animation doesn't show up until after ajax call completes

Question

Possible duplicate: Same problem (unresolved)

I show loading DOM before the Ajax call and after the Ajax call, I hide it. For some reason, the loading image appears

Answer 1

i'm not sure if this problem is already resolved, but try this:

$("#loading-popup").show();
$.ajax({
// ajax here
success: function(data) {
  $("#loading-popup").hide();
}
});

let me know if this works..

Answer 2

I know Im a bit late to the party on this, but for future reference if you want to have a loading animation AND use a synchronous ajax call AND have it animate in chrome, you can use this third party ajax script: http://fgnass.github.io/spin.js/#!

Spin.js dynamically creates spinning activity indicators that can be used as resolution-independent replacement for AJAX loading GIFs.

I use it extensively and it works perfectly for me.

Answer 3

This could be another way.

var $ani = $('#loading-popup').hide();
$(document)
  .ajaxStart(function () {
    $ani.show();
  })
  .ajaxStop(function () {
    $ani.hide();
  });

Answer 4

It depends on whether the ajax call is synchronous or asynchronous.

For asynchronous ajax call, the following works:

$("#loading-popup").show();
$.ajax({
type: 'POST',
// other parameters
success: function(yourdata)
{
    $("#loading-popup").hide();
}

For synchronous ajax call, it does NOT. Ajax gets executed first and all other processes are blocked/queued.

A way around it is to use setTimeOut like this:

setTimeout(function () {
$("#loading-popup").show();
$.ajax({
type: 'POST',
async: false,
// other parameters
//
// other codes
});
$("#loading-popup").hide();
}, 10);

But because it is synchronous, the loading GIF will NOT animate and just become a static image (At least for Chrome that is)

I guess there are only two solutions:
1) use asynchronous ajax call
2) use static loading image

Answer 5

The ajax() is async function and the statements under it might execute before the ajax call is completed. You have to hide in success or done function.

$("#loading-popup").show();
$.ajax({
// ajax here
}).success(data){
   $("#loading-popup").hide(0);
})