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

Note: 同步 JavaScript 会暂停 DOM 的解析。

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

加快加载速度

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

常规信息

规范
HTML5
接口
Event
是否冒泡
能否取消默认行为
能 (虽然在规范中被规定成了一个简单事件,不能取消默认行为)
目标
Document
默认行为
无.

属性

Property Type Description
target 只读 EventTarget The event target (the topmost target in the DOM tree).
type 只读 DOMString The type of event.
bubbles 只读 Boolean Whether the event normally bubbles or not
cancelable 只读 Boolean Whether the event is cancellable or not?

 

示例

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

 

浏览器兼容性

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 0.2 1.0 (1.7 or earlier) 9.0 9.0 3.1
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support (Yes) 1.0 (1) ? (Yes) (Yes)

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

相关事件

文档标签和贡献者

标签: 
 最后编辑者: BoatGina,