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 only after ajax call completes. The result is that the loading image doesn't even appear unless I put delay(#).hide(0) The code is the following:

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

I have tested on other Ajax calls on my website and the same problem occurs. Has anyone got this resolved? I am using Chrome 26.

EDIT: I forgot to specify that I am using synchronous ajax call. (async: false)

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