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调用，它会执行 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）使用静态加载图像

Answer 2

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

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

Answer 3

我知道我在派对上有点迟了，但是为了将来参考如果你想要一个加载动画并使用同步ajax调用并让它在chrome中有动画，你可以使用这个第三方ajax脚本：{ {3}}！

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

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

Answer 4

这可能是另一种方式。

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

Answer 5

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

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

让我知道这是否有效..

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

5 个答案: