在页面加载时显示jQuery'waiting'gif

Question

我有一个移动条的移动gif。我环顾四周试图找到一种方法来返回当前已加载页面的完成情况但事实证明它对我的需求过于复杂。

现在我想要做的就是在页面加载时显示一个gif，实际上只是因为用户不认为页面没有加载，不能用于任何其他目的。

有没有办法判断页面当前是否已加载或是否正在加载新页面以便我可以在相关时间显示gif？

目前，加载页面时会隐藏gif，按下按钮时会显示。这可行，但当您返回浏览器返回此页面时会出现问题，gif仍在显示。

如果有人知道在页面上显示这些加载符号的好方法，那就太棒了。

Answer 1

在新页面上，您可以正常显示加载gif，然后使用jQuery在dom加载时隐藏它，但这不会检测图像何时仍在加载。

$(document).ready(function(){ 
    $("#loading").hide();
});

如果你使用的是AJAX，你可以这样做：

$.ajaxSetup({
    beforeSend: function(data) {
        $("#loading").show();
    },
    complete: function(data) {
        $("#loading").hide();
    }
});

编辑：在上一页显示正在加载的gif：

$("#target").click(function() {
  $("#loading").show();
  return true;
});

Answer 2

在JQuery中，当DOM准备就绪时会触发'.ready'事件，而在下载所有元素时触发'.load'事件。您可以使用它们来控制页面状态。

好的，我再次阅读评论。所以没有DOM，有一个调用页面等待服务器完成请求然后重定向。 那么，从调用页面，你为什么不执行一个ajax请求，这样你就可以控制gif显示，成功结果（fire redirect！）和错误结果呢？