“load”事件和“readystatechange”事件中的“complete”事件有什么区别？

Question

在我的代码中，我会在移除加载旋转器之前等待页面完全加载。在这种情况下，“完全加载”包括CSS、图像等，因此DOMContentLoaded会发生得太早。

我找到了检查readyState为“complete”的load事件和readystatechange事件。

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 上触发。

- Grinfish

---

我找不到一个好的副本，这个问题已经被问了很多次，但是答案都不够充分。 - epascarello

Answer 1

它们几乎相同 - 唯一的区别是在 load 事件触发之前，readystatechange 事件会更改为 complete。有关 document.readyState 的详细信息，请参见文档：

complete

文档和所有子资源都已经加载完成，该状态表示 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事件触发后运行。

- CertainPerformance

---

糟糕，那个语法错误肯定是我在发布问题时打错了。感谢你提供的片段；非常有趣。 - Grinfish