加载动画直到 Ajax 调用完成后才显示

Question

可能是重复问题：相同的问题（未解决） 在Ajax调用之前和之后，我显示加载DOM，并隐藏它。由于某种原因，在ajax调用完成后才出现加载图像。结果是，除非我放置delay(#).hide(0)，否则甚至不会出现加载图像。代码如下：

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

我在网站上测试了其他Ajax调用，发现相同的问题。有人解决了这个问题吗？我使用的是Chrome 26。

编辑：我忘记指定我正在使用同步的ajax调用。（async: false）

- Jay Na

Answer 1

这取决于ajax调用是同步还是异步。

对于异步的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）使用静态加载图像

- Jay Na

Answer 2

ajax() 是一个 async 函数，它下面的语句可能会在 ajax 调用完成之前执行。你必须在 success 或 done 函数中隐藏。

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

- Adil

---

感谢您的答案。您为我指明了研究的正确方向。我决定发布一个更全面的答案。 - Jay Na

Answer 3

我不确定这个问题是否已解决，但是可以试试这个：

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

如果这个有效，请告诉我。

- Reynaldo

Answer 4

这可能是另一种方式。

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

- AtanuCSE

Answer 5

我知道我有点晚了，但是以后如果你想要一个加载动画并且使用同步的ajax调用，并且在chrome中进行动画，你可以使用这个第三方ajax脚本：http://fgnass.github.io/spin.js/#！

Spin.js动态创建旋转活动指示器，可用作分辨率独立的AJAX加载GIF的替代品。

我广泛使用它，对我来说完美无缺。

- Kevin Bradshaw