--- title: DOMContentLoaded slug: Web/API/Window/DOMContentLoaded_event tags: - DOMContentLoaded - Window.open() - load - window.onload translation_of: Web/API/Window/DOMContentLoaded_event original_slug: Web/Events/DOMContentLoaded ---

当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、图像和子框架的完全加载。

模拟的css文件：CSS.php

<?php
sleep(3);

测试代码：

<link rel="stylesheet" href="css.php">
<script>
document.addEventListener('DOMContentLoaded',function(){
    console.log('3 seconds passed');
});
</script>

如果将link置于script之后，就会立即打印。

{{Note("同步 JavaScript 会暂停 DOM 的解析。")}}

{{Note("还有许多通用和独立的库提供跨浏览器方法来检测 DOM 是否已准备就绪")}}

加速中

如果您希望 DOM 在用户请求页面后尽可能快地解析，你可以做的一些事情是把你的 JavaScript 异步化 以及 优化样式表的加载, 由于被并行加载而减慢页面加载，从主 html 文档“窃取”流量。

常规信息

规范
HTML5
接口
Event
是否冒泡
是
能否取消
能 (尽管一个简单的事件被指定为不可取消)
目标
Document
默认行为
无.

属性

属性 类型 描述
target {{readonlyInline}} {{domxref("EventTarget")}} 产生该事件的对象(DOM树中最顶级的那个对象).
type {{readonlyInline}} {{domxref("DOMString")}} 事件类型.
bubbles {{readonlyInline}} {{jsxref("Boolean")}} 该事件是否冒泡.
cancelable {{readonlyInline}} {{jsxref("Boolean")}} 该事件是否可取消默认行为.

示例

<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>

浏览器兼容性

{{Compat("api.Window.DOMContentLoaded_event")}}

至少从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).

相关事件