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之后，就会立即打印。

加速中

如果您希望 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>

浏览器兼容性

BCD tables only load in the browser

至少从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
• DOMContentLoaded demo