我正在尝试帮助开发一个库，为此我正在尝试处理页面加载。
在这个过程中我想让库完全兼容 defer 和 async 的使用。
我想要的很简单：
我怎么知道 DOMContentLoaded 在文件执行时被触发？
为什么这如此困难？
在 IE 中，document.readyState 在 DOMContentLoaded 之前显示交互。
我不会以任何方式使用浏览器检测，这违反了我和其他参与者的政策。
什么是正确的选择？
编辑：
好像我说的不够清楚。我没有兴趣知道是否已经发生加载事件！我已经知道如何解决这个问题了！我想知道如何用DOMContentLoaded解决！！！
查看页面中的所有资源是否已加载：
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 状态的很好的读物。
您可以检查文档的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）不同，但它具有相同的实际目的，即，它告诉您文档已完成加载并已被解析，但是子资源如图像、样式表和框架仍在加载（源）。
如果您需要等待 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 更改为 interactivewindow的DOMContentLoaded事件被解雇document.readyState 更改为 completewindow的load事件被解雇load您可以在此小提琴中检查页面加载期间事件的完整顺序。
试试这个或看看这个链接
<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>
笔记
如果你有<script>一个<link rel="stylesheet" ...>
页面不会完成解析 - 并且DOMContentLoaded不会触发 - 直到加载样式表
如果你想“确切地”知道 DOMContentLoaded 是否被触发，你可以使用这样的布尔标志：
var loaded=false;
document.addEventListener('DOMContentLoaded',function(){
loaded=true;
...
}
然后检查：
if(loaded) ...