如何检测是否触发了DOMContentLoaded

Question

我正在尝试帮助开发一个库,为此我正在尝试使用页面加载.
在这个过程中,我想让库完全兼容defer和async的使用.

我想要的很简单:
我怎么知道DOMContentLoaded在文件执行时被触发了？

为什么这么难？
在IE中,document.readyState在DOMContentLoaded之前显示交互.
我不会以任何方式使用浏览器检测,这违反了我和其他参与者的政策.

什么是正确的选择？

编辑:

好像我还不够清楚.我没有兴趣知道是否已经发生加载事件!我已经知道如何解决这个问题!我想知道如何用DOMContentLoaded解决!!!

Answer 1

要查看是否已加载页面中的所有资源:

if (document.readyState === "complete" || document.readyState === "loaded") {
     // document is already ready to go
}

这已经在IE和webkit中得到了很长时间的支持.它在3.6中被添加到Firefox中.这是规格. "loaded"适用于较旧的Safari浏览器.

如果您想知道页面何时被加载和解析,但尚未加载所有子资源(更类似于DOMContentLoaded),您可以添加"交互"值:

if (document.readyState === "complete" 
     || document.readyState === "loaded" 
     || document.readyState === "interactive") {
     // document has at least been parsed
}

除此之外,如果你真的只想知道DOMContentLoaded何时被触发,那么你必须为它安装一个事件处理程序(在它触发之前)并在它触发时设置一个标志.

这个MDN文档也是一个非常好的阅读,有关DOM状态的更多信息.

Answer 2

在document.readyState此事件被触发而改变.因此,您可以检查readyState值,这样就可以判断事件是否被触发.这是start()在文档准备就绪时运行的代码:

if (/comp|inter|loaded/.test(document.readyState)){
    // In case DOMContentLoaded was already fired, the document readyState will be one of "complete" or "interactive" or (nonstandard) "loaded".
    // The regexp above looks for all three states. A more readable regexp would be /complete|interactive|loaded/
    start();
}else{
    // In case DOMContentLoaded was not yet fired, use it to run the "start" function when document is read for it.
    document.addEventListener('DOMContentLoaded', start, false);
}

Answer 3

如何在 DOMContentLoaded（或尽快）上正确运行某些东西

如果您需要等待 HTML 文档完全加载并解析以运行某些内容，那么您需要等待DOMContentLoaded，毫无疑问。但是，如果您无法控制脚本何时执行，则可能DOMContentLoaded在您有机会侦听事件时已被触发。

考虑到这一点，您的代码需要检查是否DOMContentLoaded已经被触发，如果是，则立即执行需要等待的任何内容DOMContentLoaded：

function runWhenPageIsFullyParsed() {
    // your logic goes here
}

if (document.readyState === "complete") {
    // already fired, so run logic right away
    runWhenPageIsFullyParsed();
} else {
    // not fired yet, so let's listen for the event
    window.addEventListener("DOMContentLoaded", runWhenPageIsFullyParsed);
}

页面加载期间事件的正确顺序是：

• document.readyState 更改为 interactive
• window的DOMContentLoaded事件被解雇
• document.readyState 更改为 complete
• window的load事件被解雇load

您可以在此小提琴中检查页面加载期间事件的完整顺序。