加载动画直到 ajax 调用完成后才会显示答案

【问题标题】：Loading animation doesn't show up until after ajax call completes加载动画直到 ajax 调用完成后才会显示
【发布时间】：2013-04-14 15:31:20
【问题描述】：

可能重复：Same problem (unresolved)

我在 Ajax 调用之前和 Ajax 调用之后显示加载 DOM，我将其隐藏。由于某种原因，加载图像仅在 ajax 调用完成后出现。结果是加载图片甚至都没有出现，除非我输入delay(#).hide(0) 代码如下：

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

我已经在我的网站上测试了其他 Ajax 调用，并且出现了同样的问题。有没有人解决这个问题？我正在使用 Chrome 26。

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

【问题讨论】：

标签： jquery ajax

【解决方案1】：

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

对于异步 ajax 调用，以下工作：

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

对于同步 ajax 调用，它NOT。 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) 使用静态加载图片

【讨论】：

【解决方案2】：

我知道我在这方面有点晚了，但如果你想要加载动画并使用同步 ajax 调用并让它在 chrome 中动画，为了将来参考，你可以使用这个第三方 ajax 脚本：@ 987654321@！

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

我广泛使用它，它非常适合我。

【讨论】：

【解决方案3】：

这可能是另一种方式。

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

【讨论】：

【解决方案4】：

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

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

让我知道这是否有效..

【讨论】：

【解决方案5】：

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

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

【讨论】：

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