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

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);
})