加载动画显示不出来，直到Ajax调用完成后 [英] Loading animation doesn't show up until after ajax call completes

问题描述

可能的复制：<一href="http://stackoverflow.com/questions/3535373/loading-animation-doesnt-show-up-until-after-ajax-call-completes-in-safari-chro">Same问题（未解决）

我展示了Ajax调用之前加载DOM和Ajax调用后，我隐藏它。出于某种原因，加载图像Ajax调用完成后，才出现。其结果是，加载图像甚至不出现，除非我把延迟（＃）隐藏（0）的code是如下：

I show loading DOM before the Ajax call and after the Ajax call, I hide it. For some reason, the loading image appears only after ajax call completes. The result is that the loading image doesn't even appear unless I put delay(#).hide(0) The code is the following:

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

我在其他Ajax已经测试要求在我的网站，并出现相同的问题。有没有人有这个决心？我使用Chrome 26。

I have tested on other Ajax calls on my website and the same problem occurs. Has anyone got this resolved? I am using Chrome 26.

编辑：我忘了指定，我使用的同步 Ajax调用。 （异步：假）

I forgot to specify that I am using synchronous ajax call. (async: false)

推荐答案

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

It depends on whether the ajax call is synchronous or asynchronous.

对于同步 Ajax调用，以下工作：

For asynchronous ajax call, the following works:

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

对于同步 Ajax调用，它的不可以。阿贾克斯被执行第一和所有其他进程都堵塞/排队。

For synchronous ajax call, it does NOT. Ajax gets executed first and all other processes are blocked/queued.

变通的办法是使用的setTimeout是这样的：

A way around it is to use setTimeOut like this:

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

但是，因为它是同步的，加载GIF将不会动画和刚刚成为静态图象（至少对于铬是）

But because it is synchronous, the loading GIF will NOT animate and just become a static image (At least for Chrome that is)

我想只有两种解决方案：
1）使用异步Ajax调用
2）使用静态加载图片

I guess there are only two solutions:
1) use asynchronous ajax call
2) use static loading image

这篇关于加载动画显示不出来，直到Ajax调用完成后的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！