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

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