jquery - 加载动画只有在 ajax 调用完成后才会显示

Question

可能的重复:Same problem (unresolved)

我在 Ajax 调用之前显示加载 DOM，在 Ajax 调用之后隐藏它。由于某种原因，加载图像仅在 ajax 调用完成后才出现。结果是加载图像甚至不会出现，除非我输入 delay(#).hide(0) 代码如下:

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

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

编辑:我忘记指定我正在使用同步 ajax 调用。 (异步: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)使用静态加载图片