javascript - 文档停止加载时的事件

Question

我有一个网页，其大部分是在前端用 JavaScript 构建的。当基本的 HTML 被解析并构建 DOM 树时，“ready”事件触发。在此事件中，将启动 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

如上所述here ，您可以在单个图像最终加载时为其注册加载事件。然而，正如那里所述，跨浏览器或者如果图像已经在浏览器的缓存中，这可能不可靠。所以我认为至少有一部分不是100%值得信赖的。话虽如此，您可以轻松地 Hook 一堆不同的异步事件，然后仅在所有事件完成时才使用react。例如:

$(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(如果尚未解析)。这样您就不会陷入等待永远不会发生的事件。