“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");
}

问题是，这两者之间有明显的区别吗？我希望使用跨浏览器和设备最广泛支持的选项。我见过readystatechangeIE 的“替代方案”，但我认为当我尝试测试它们时，这两个事件都会在 Firefox、Chrome 和 Safari 上触发。

Answer 1

它们几乎相同 - 唯一的区别是事件在事件触发之前readystatechange更改。请参阅文档：complete loaddocument.readyState

完全的

文档和所有子资源已完成加载。该状态表明load事件即将触发。

另请注意，您应该将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运行的。