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)

mechanicalfish · Accepted Answer · 2013-12-05 21:28:09Z

18

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

edited Dec 5, 2013 at 21:28

mechanicalfish

12.9k3 gold badges49 silver badges42 bronze badges

answered Apr 14, 2013 at 16:48

Jay Na

8372 gold badges9 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Kevin Bradshaw · Accepted Answer · 2013-08-28 11:17:20Z

0

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.

answered Aug 28, 2013 at 11:17

Kevin Bradshaw

6,49713 gold badges58 silver badges79 bronze badges

Comments

AtanuCSE · Accepted Answer · 2013-12-01 03:50:18Z

0

This could be another way.

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

answered Dec 1, 2013 at 3:50

AtanuCSE

8,95016 gold badges80 silver badges115 bronze badges

Comments

Rey · Accepted Answer · 2014-09-20 03:41:45Z

0

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..

answered Sep 20, 2014 at 3:41

Rey

319 bronze badges

Comments

Agustin Meriles · Accepted Answer · 2018-04-18 17:58:30Z

0

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

edited Apr 18, 2018 at 17:58

Agustin Meriles

4,8603 gold badges32 silver badges45 bronze badges

answered Apr 14, 2013 at 15:32

Adil

148k25 gold badges217 silver badges207 bronze badges

1 Comment

Jay Na Over a year ago

Thanks for the answer. You pointed me in the right direction in terms of research. I decided to post a more comprehensive answer.

Collectives™ on Stack Overflow

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

5 Answers 5

Comments

Comments

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related