我正在尝试开发一个库，并且在其中尝试处理页面加载。
在这个过程中，我想使该库完全兼容使用defer和async。
我想要的很简单：
如何知道DOM已经加载完成并被执行文件调用？
为什么这么难呢？
在IE中，document.readyState在DOMContentLoaded之前显示interactive。
我不会以任何方式使用浏览器检测，这违反了我的政策和其他参与者的政策。
什么是正确的替代方案？
编辑：
看起来我没有表达得清楚。 我不想知道load事件是否已经发生！ 我已经知道如何解决那个问题！ 我想知道如何处理DOMContentLoaded！！！
检查页面中的所有资源是否已加载：
if (document.readyState === "complete" || document.readyState === "loaded") {
// document is already ready to go
}
这一特性在IE和Webkit中已经有很长时间的支持。在Firefox 3.6中添加了该特性。这里是规范。"loaded"适用于早期的Safari浏览器。
如果你想知道页面何时被加载和解析，但所有的子资源尚未加载（这更类似于DOMContentLoaded），你可以添加"value"属性为"interactive":
if (document.readyState === "complete"
|| document.readyState === "loaded"
|| document.readyState === "interactive") {
// document has at least been parsed
}
除此之外，如果你真的只想知道 DOMContentLoaded 何时触发，那么你需要在它触发之前安装一个事件处理程序，并在其触发时设置一个标志。
这篇 MDN 文档也是一个非常好的阅读材料，可以更好地理解 DOM 状态。
document.readyState == "interactive" 也可以表示 DOMContentLoaded 已触发。请参考这里：https://developer.mozilla.org/en-US/docs/Web/API/Document/readyState - thedayturns您可以检查文档的readyState值，并以此确定事件是否已触发。以下是在文档完成解析时运行名为start()的函数的代码：
if (/complete|interactive|loaded/.test(document.readyState)) {
// In case the document has finished parsing, document's readyState will
// be one of "complete", "interactive" or (non-standard) "loaded".
start();
} else {
// The document is not ready yet, so wait for the DOMContentLoaded event
document.addEventListener('DOMContentLoaded', start, false);
}
注意上面的代码检测到 文档解析完成 时。要注意这不同于检测是否已触发 DOMContentLoaded（该事件会在 interactive 之后立即发生），但它具有相同的实际目的，即告诉您文档已经完成加载并解析，但子资源（如图像、样式表和框架）仍在加载中 (来源)。
DOMContentLoaded仅在interactive之后触发（证明在此处：https://jsfiddle.net/luciopaiva/grs82byv/20/） - Lucio Paiva如果您需要等待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 从 loading 开始document.readyState 变为 interactivewindow 的 DOMContentLoaded 事件被触发document.readyState 变为 completewindow 的 load 事件被触发参考资料：MDN
您可以在 this fiddle 中查看页面加载期间完整的事件顺序。
log(document.readyState); 可以帮助指出 loading 状态，该状态发生在交互之前。我建议将这个重要步骤添加到事件顺序中。在 MDN readyState 文章中有详细介绍。谢谢！ - King Hollydocument.readyState === "interactive"条件。 - Saurabh Gupta$.ajax.done 方法中运行它。此外，这段代码正在运行在一个 OSGI 容器中，我的代码被安装到其中（Atlassian 插件）。因此，加载顺序不由我控制，并且同时加载了许多不同的项目。 - Saurabh Gupta尝试这个或查看这个link
<script>
function addListener(obj, eventName, listener) { //function to add event
if (obj.addEventListener) {
obj.addEventListener(eventName, listener, false);
} else {
obj.attachEvent("on" + eventName, listener);
}
}
addListener(document, "DOMContentLoaded", finishedDCL); //add event DOMContentLoaded
function finishedDCL() {
alert("Now DOMContentLoaded is complete!");
}
</script>
注意
如果在 <link rel="stylesheet" ...> 后面有一个 <script>，页面将无法完成解析 - 并且 DOMContentLoaded 不会触发 - 直到样式表加载完毕。
var loaded=false;
document.addEventListener('DOMContentLoaded',function(){
loaded=true;
...
}
然后使用以下代码进行检查：
if(loaded) ...
事情是这样的，如果其他库（如jQuery）已经使用DOMContentLoaded，那么您就不能再次使用它。这可能是个坏消息，因为最终您将无法使用它。你会说，为什么不只是使用$(document).ready()，因为不是所有东西都需要使用jQuery，特别是如果它是一个不同的库。