Question

我有一个网页，其大部分是在前端构建的，在javascript中。解析基本HTML并构建DOM树时，＆＃34; ready＆＃34;事件触发器。在此活动中，将启动javascript代码，继续构建网页。

$().ready(function() {
    $(document.body).html('<img src = "img.png" />');
    $.ajax({
        url: 'text.txt'
    });
});

正如你在这个小例子中看到的那样，

将新元素添加到DOM
正在加载更多内容，如图片
正在发送ajax请求

只有当所有这一切都完成后，当浏览器的加载进度条第一次消失时，我认为我的文档实际上已准备就绪。有没有合理的方法来处理这个事件？

注意这个

$().ready(function() {
    $(document.body).html('<img src = "img.png" />');
    $.ajax({
        url: 'text.txt'
    });
    alert('Document constructed!');
});

是不够的，因为HTTP请求是异步的。也许将处理程序附加到每个请求，然后检查是否所有请求都是我想要的一种方式，但我正在寻找更优雅的东西。

附录： 我正在寻找的事件的更正式的定义：

当文档准备好并且页面的动态内容第一次完成加载/执行时的事件，除非用户通过鼠标移动，单击等触发其他事件。

Answer 1

您正在寻找.ajaxStop()。

像这样使用：

$("#loading").ajaxStop(function(){
      $(this).hide();
});

除非你想像上面的例子中那样使用this，否则你附加的DOM元素并不重要。

来源：http://api.jquery.com/ajaxStop/

Answer 2

如上所述here，您可以在最终加载时为单个图像注册加载事件。但是，如同在那里描述的那样，这可能在浏览器之间不可靠或者图像已经在浏览器的缓存中。所以我认为至少有一部分不是100％值得信赖的。话虽如此，您可以轻松地挂钩到一堆不同的异步事件，然后只有在所有事件都完成后才会做出反应。例如：

$(document.body).html('<img src="img.png" id="porcupine"/>');

var ajaxPromise1 = $.get(...);
var ajaxPromise2 = $.get(...);
var imgLoadDeferred1 = $.Deferred();

$("#porcupine").load(
  function() {
    imgLoadDeferred1.resolve();
  }
);

$.when(ajaxPromise1, ajaxPromise2, imgLoadDeferred1).done(
  function () {
    console.log("Everything's done.");
  }
);

如果您想允许图像加载可能永远不会生成事件，您还可以设置一个最终会关闭的计时器，并尝试解析imgLoadDeferred1（如果尚未解析）。这样你就不会等到一个从未发生过的事件。

Answer 3

向ajax调用添加全局计数器，以便在ajax请求准备就绪时调用{+ 1}}函数，该函数将+1到glogal addToReadyCounter();。

在同一功能中检查readyCount和触发事件处理程序

var readyCount;

如果您只使用var readyCount = 0, ajaxRequestCount = 5; function addToReadyCount() { ++readyCount; if (readyCount >= ajaxRequestCount) { documentReadyEvent(); } } $.ajax( ... success: function(data){ addToReadyCount(); } ...);进行addToReaadyCount，则只有在所有调用成功时才会触发，如果出现错误，请使用其他.ajax（）事件处理程序来增加计数器。

文档停止加载时的事件

3 个答案: