From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/zh-cn/web/events/domcontentloaded/index.html | 128 +++++++++++++++++++++ 1 file changed, 128 insertions(+) create mode 100644 files/zh-cn/web/events/domcontentloaded/index.html (limited to 'files/zh-cn/web/events/domcontentloaded') diff --git a/files/zh-cn/web/events/domcontentloaded/index.html b/files/zh-cn/web/events/domcontentloaded/index.html new file mode 100644 index 0000000000..67c6a44253 --- /dev/null +++ b/files/zh-cn/web/events/domcontentloaded/index.html @@ -0,0 +1,128 @@ +--- +title: DOMContentLoaded +slug: Web/Events/DOMContentLoaded +tags: + - DOMContentLoaded + - Window.open() + - load + - window.onload +translation_of: Web/API/Window/DOMContentLoaded_event +--- +

当初始的 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).

+ +

相关事件

+ + -- cgit v1.2.3-54-g00ecf