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

可能重复： 同样的问题（未解决）

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

Answer 2

我知道我在聚会上有点迟了，但是为了将来参考如果你想要一个加载动画并使用同步ajax调用并让它在chrome中有动画，你可以使用这个第三方ajax脚本： http：// fgnass.github.io/spin.js/# ！

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

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

Answer 3

这可能是另一种方式。

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

Answer 4

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

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

让我知道这个是否奏效..

Answer 5

ajax（）是async函数，其下的语句可能在ajax调用完成之前执行。 你必须隐藏success或donefunction。

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