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：

完成

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

btwn“加载”事件与readystatechange“完成”事件有何区别？

1 个答案: