6

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

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

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

我已经在我的网站上测试了其他 Ajax 调用，并且出现了同样的问题。有没有人解决这个问题？我正在使用 Chrome 26。

编辑：我忘了指定我正在使用同步ajax 调用。( async: false)

4

5 回答 5

17

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

于 2013-04-14T16:48:40.957 回答
0

这可能是另一种方式。

var $ani = $('#loading-popup').hide();
$(document)
  .ajaxStart(function () {
    $ani.show();
  })
  .ajaxStop(function () {
    $ani.hide();
  });
于 2013-12-01T03:50:18.617 回答
0

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

Spin.js 动态创建旋转活动指示器，可用作 AJAX 加载 GIF 的与分辨率无关的替代品。

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

于 2013-08-28T11:17:20.063 回答
0

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

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

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

于 2014-09-20T03:41:45.340 回答
0

ajax()是函数，它下面async的语句可能会在ajax调用完成之前执行。你必须隐藏success或done发挥作用。

$("#loading-popup").show();
$.ajax({
// ajax here
}).success(data){
   $("#loading-popup").hide(0);
})
于 2013-04-14T15:32:46.320 回答