问题是如此之多，无论是在网上还是在网络上-如何检查DOM是否已加载到Javascript中？但是这里有个陷阱：
<script>标记还是通过其他Java脚本加载之后，DOM已经加载了很长时间。是否可以或多或少可靠地做到这一点并且具有跨浏览器的兼容性？
补充：让我澄清一下：我正在编写一个独立的.JS文件，该文件可以包含在任意网页中。我想在加载DOM之后执行代码。但我不知道如何我的脚本将被包括在内。可以通过放置<script>标签（在这种情况下，传统onload或DOM就绪解决方案将起作用）；或者可以通过AJAX或其他某种方式来加载它，而在DOM已经加载之后很久以后（因此前面提到的解决方案将永远不会触发）。
Answers:
该document.readyState属性可用于检查文档是否准备就绪。从MDN：
价值观
文档的readyState可以是以下之一：
- 加载中-文档仍在加载中。
- 交互式的–文档已完成加载并且文档已被解析，但是子资源（例如图像，样式表和框架）仍在加载中。
- 完成–文档和所有子资源已完成加载。状态指示加载事件即将触发。
代码示例：
if(document.readyState === "complete") {
// Fully loaded!
}
else if(document.readyState === "interactive") {
// DOM ready! Images, frames, and other subresources are still downloading.
}
else {
// Loading still in progress.
// To wait for it to complete, add "DOMContentLoaded" or "load" listeners.
window.addEventListener("DOMContentLoaded", () => {
// DOM ready! Images, frames, and other subresources are still downloading.
});
window.addEventListener("load", () => {
// Fully loaded!
});
}
addEventListener()IE9所添加的功能，该功能不适用于Windows XP
load而不是的事件onload吗？
Firefox，Opera和基于Webkit的浏览器都有一个文档级事件DOMContentLoaded，您可以使用监听document.addEventListener("DOMContentLoaded", fn, false)。
在IE中更为复杂。jQuery在IE中的作用是监视onreadystatechange文档对象的特定就绪状态，并备份document.onload事件。document.onload在DOM准备就绪之后才触发（仅当所有图像均已完成加载时），因此它仅用作备用，以防早期事件由于某种原因而无法正常工作。
如果您花一些时间在Google上搜索，则会发现执行此操作的代码。我认为最适合此操作的代码是在jQuery和YUI之类的大型框架中，因此，即使我不使用该框架，我也会在其源代码中查找技术。
这是jQuery 1.6.2源代码的主要部分document.ready()：
bindReady: function() {
if ( readyList ) {
return;
}
readyList = jQuery._Deferred();
// Catch cases where $(document).ready() is called after the
// browser event has already occurred.
if ( document.readyState === "complete" ) {
// Handle it asynchronously to allow scripts the opportunity to delay ready
return setTimeout( jQuery.ready, 1 );
}
// Mozilla, Opera and webkit nightlies currently support this event
if ( document.addEventListener ) {
// Use the handy event callback
document.addEventListener( "DOMContentLoaded", DOMContentLoaded, false );
// A fallback to window.onload, that will always work
window.addEventListener( "load", jQuery.ready, false );
// If IE event model is used
} else if ( document.attachEvent ) {
// ensure firing before onload,
// maybe late but safe also for iframes
document.attachEvent( "onreadystatechange", DOMContentLoaded );
// A fallback to window.onload, that will always work
window.attachEvent( "onload", jQuery.ready );
// If IE and not a frame
// continually check to see if the document is ready
var toplevel = false;
try {
toplevel = window.frameElement == null;
} catch(e) {}
if ( document.documentElement.doScroll && toplevel ) {
doScrollCheck();
}
}
},
if ( document.readyState === "complete" ) {因此他们将处理文档已准备就绪的情况。如果要构建自己的微型框架来执行此操作，则必须自己构建此类功能。
如果document.readyState可以，可以通过轮询快速解决问题：
(function() {
var state = document.readyState;
if(state === 'interactive' || state === 'complete') {
// do stuff
}
else setTimeout(arguments.callee, 100);
})();
document.readyState是我的问题的答案。正如我多次指出的那样，附加到“ DOMReady”类事件不是问题。问题是readyState == complete时，因此DOMReady事件将永远不会触发。
document.readyState（即，您不希望支持传统的非IE浏览器），则根本不需要任何特定于浏览器的代码（DOMContentLoadedvs. onloadvs. onreadystatechange，addEventListenervs attachEvent） -上述方案作品无处不在
DOMContentLoaded初始HTML文件已完全加载并解析后，无需等待样式表，图像和子帧完成加载，就会触发此事件。Chrome，firefox，IE9，opera和safari同样支持该事件
document.addEventListener("DOMContentLoaded", function(event)
{
console.log("DOM fully loaded and parsed");
}
注意：Internet Explorer 8支持readystatechange事件，该事件可用于检测DOM准备就绪的时间。
这是在页面底部运行脚本的一种方法。另外，通过使用window.onload，您可以等待所有图像/脚本被加载。或者，您可以简单地将代码放在底部，而无需等待图像加载。
<html>
<head>
</head>
<body>
</body>
<script language="text/javascript">
window.onload = (function (oldOnLoad) {
return function () {
if (oldOnLoad) {
olOnLoad(); //fire old Onload event that was attached if any.
}
// your code to run after images/scripts are loaded
}
})(window.onload);
// your code to run after DOM is loaded
</script>
</html>
编辑：针对Vilx的评论
这里有许多onload绑定，例如http://jsfiddle.net/uTF2N/3/
document.readyState属性可以使用，尽管我不确定浏览器是否兼容...