Geek asks and answers

Animation loading is not displayed until ajax call ends

Possible duplicate: Same problems (unresolved)

I show the loading of the DOM before calling Ajax and after calling Ajax, I hide it. For some reason, the boot image only appears after the ajax call ends. As a result, the boot image does not even appear if I don’t delay(#).hide(0). The code is as follows:

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

I tested other Ajax calls on my website and this problem occurs. Has anyone figured this out? I am using Chrome 26.

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

+5
source share
5 answers

, ajax .

- :

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

ajax- . Ajax, / .

setTimeOut :

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

, GIF ( Chrome)

, :
1) ajax
2)

+15

ajax() - asyn, ajax . success done.

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

, , , . ajax. , ajax script: http://fgnass.imtqy.com/spin.js/#!

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

I use it extensively and works great for me.

0
source

This may be a different way.

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

I'm not sure if this problem has already been resolved, but try the following:

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

let me know if that works.

0
source

More articles:


All Articles