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

Question

我显示了在Ajax调用之前和Ajax调用之后加载DOM的过程，我将其隐藏。由于某些原因，加载图像仅在ajax调用完成之后出现。结果是，除非我delay(#).hide(0)输入以下内容，否则加载图像甚至都不会出现。代码如下：

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

我已经在我的网站上的其他Ajax调用上进行了测试，并且发生了相同的问题。有人解决过这个吗？我正在使用Chrome 26。

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

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）使用静态加载图像