DOMContentLoaded

当初始HTML文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、图像和子框架完成加载。另一个不同的事件 load 应该仅用于检测一个完全加载的页面。 在使用 DOMContentLoaded 更加合适的情况下使用 load 是一个非常流行的错误，所以要谨慎。

加快加载速度

如果您希望DOM在用户请求页面后尽可能快地解析，你可以使你的 JavaScript 异步加载 以及 优化样式表的加载。否则，并行加载将使页面负载减慢，「窃取」主要 html 文档的流量。

常规信息

规范

HTML5

接口

Event

是否冒泡

是

能否取消默认行为

能 (虽然在规范中被规定成了一个简单事件,不能取消默认行为)

目标

Document

默认行为

无.

属性

示例

<script>
  document.addEventListener("DOMContentLoaded", function(event) {
      console.log("DOM fully loaded and parsed");
  });
</script>

<script>
  document.addEventListener("DOMContentLoaded", function(event) {
      console.log("DOM fully loaded and parsed");
  });
  for(var i=0; i<1000000000; i++){
      // 这个同步脚本将延迟DOM的解析。
      // 所以DOMContentLoaded事件稍后将启动。
  } 
</script>

浏览器兼容性

至少从Gecko 1.9.2,Chrome 6,以及Safari 4开始,就已经实现了该事件的冒泡行为.

兼容不支持该事件的浏览器

在IE8中,可以使用readystatechange事件来检测DOM文档是否加载完毕.在更早的IE版本中,可以通过每隔一段时间执行一次document.documentElement.doScroll("left")来检测这一状态，因为这条代码在DOM加载完毕之前执行时会抛出错误(throw an error)。

诸如jQuery这样的通用JS库，会提供跨浏览器的方法来检测DOM是否加载完成。也有其他专门实现该功能的脚本:contentloaded.js (只能添一个时间监听函数)以及jquery.documentReady.js (并不依赖jQuery,虽然名字中有jquery).

相关事件

• DOMContentLoaded
• readystatechange
• load
• beforeunload
• unload