Javascript DOMContentLoaded

DOMContentLoaded是Javascript的一个重要事件，它表示DOM文档加载完成后触发的事件。当DOM文档被完全加载和解析后，会触发该事件，此时页面的所有DOM节点都已经被创建完毕，可以安全地操纵DOM节点。

监听DOMContentLoaded事件

要监听DOMContentLoaded事件，可以使用addEventListener()方法将其添加到文档对象上：

document.addEventListener('DOMContentLoaded', function() {
  //执行需要在DOM加载完毕后执行的代码
});

或者使用jQuery：

$(document).ready(function() {
  //执行需要在DOM加载完毕后执行的代码
});

相关事件

除了DOMContentLoaded事件，还有两个相关的事件：window.onload和document.onreadystatechange。

window.onload

window.onload事件表示整个页面所有资源都已加载完成，包括图片、样式表、脚本等资源。如果在页面中使用了大量的图片或其他资源，而且需要这些资源完全加载完毕后再执行部分代码，那么使用window.onload事件比DOMContentLoaded更为合适。

window.onload = function() {
  //执行需要在页面所有资源加载完毕后执行的代码
};

document.onreadystatechange

document.onreadystatechange事件表示文档的readyState属性变化时触发的事件。readyState表示文档的加载状态，有以下几种取值：

• loading：正在加载中
• interactive：文档已被解析，DOM节点可以被操纵
• complete：文档已经加载完成，所有资源都已下载

document.onreadystatechange = function() {
  if (document.readyState === 'complete') {
    //执行需要在文档加载完成后执行的代码
  }
};

然而，需要注意的是，当使用document.onreadystatechange的时候，它可能会在DOMContentLoaded之前或之后触发，因此不能保证在DOMContentLoaded事件之后执行。所以，在需要在DOMContentLoaded事件之后执行的代码，最好还是使用前面的两种方法。

结论

• DOMContentLoaded事件表示DOM文档加载完成后触发的事件；
• window.onload事件表示整个页面所有资源都已加载完成后触发的事件；
• document.onreadystatechange事件表示文档readyState属性变化时触发的事件，但不能保证在DOMContentLoaded事件之后执行。