javascript - 'load' 事件与 readystatechange 'complete' 事件有什么区别？

Question

在我的代码中，我会等到页面完全加载后再删除加载微调器。本例中的“完全加载”包括 css、图像等，因此 DOMContentLoaded 发生得太早了。

我发现 load 事件和 readystatechange 事件都在检查 readyState“完成”。

document.addEventListener('readystatechange'), (event) => {
    if (document.readyState === "complete") {
        console.log("page fully loaded");
    }
}

document.addEventListener('load'), (event) => {
    console.log("page fully loaded");
}

问题是，这两者之间有什么明显的区别吗？我正在寻找跨浏览器和设备使用最广泛支持的选项。我看到 readystatechange 被称为 IE 的“替代品”，但我认为当我尝试测试这两个事件时，它们会在 Firefox、Chrome 和 Safari 上触发。

Answer 1

它们几乎相同 - 唯一的区别是 readystatechange 事件更改为 complete 就在 load 事件触发。查看docs对于 document.readyState:

complete

The document and all sub-resources have finished loading. The state indicates that the load event is about to fire.

另请注意，您应该将 load 监听器添加到 window，并且您需要将处理函数传递给 addEventListener 而不是使用逗号运算符。

document.addEventListener('readystatechange', (event) => {
  if (document.readyState === "complete") {
    console.log("readystatechange complete, adding timeout");
    setTimeout(() => console.log('timeout running'));
  }
});

window.addEventListener('load', (event) => {
  console.log("load handler running");
});

<img src="https://lh3.googleusercontent.com/-jE4axz9ZwU4/AAAAAAAAAAI/AAAAAAAAAAA/ACevoQPQhQkQ5T2LbDXKarOmW373pkQ0Ug/mo/photo.jpg?sz=32">

请注意，尽管在 readystatechange 中设置了没有延迟的超时，但它在 load 事件触发后 运行。