DOMContentLoaded Redirect 2

DOMContentLoaded事件是當document被完整的讀取跟解析後就會被觸發,不會等待 stylesheets, 圖片和subframes完成讀取  (load事件可以用來作為判斷頁面已經完整讀取的方法).

Note: Stylesheet loads block script execution, 如果被 <script> 放在 <link rel="stylesheet" ...>後面的話, 直到stylesheet讀完成後,頁面才會完整的被解析並且 DOMContentLoaded才會被觸發。

General info

Specification
HTML5
Interface
Event
Bubbles
Yes
Cancelable
Yes (although specified as a simple event that isn't cancelable)
Target
Document
Default Action
None.

Properties

Property Type Description
target Read only EventTarget The event target (the topmost target in the DOM tree).
type Read only DOMString The type of event.
bubbles Read only boolean Does the event normally bubble?
cancelable Read only boolean Is it possible to cancel the event?

Browser compatibility

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)

Bubbling for this event is supported by at least Gecko 1.9.2, Chrome 6, and Safari 4.

Cross-browser fallback

Internet Explorer 8 supports the <code>readystatechange</code> event, which can be used to detect that the DOM is ready. In earlier version of Internet Explorer, this state can be detected by regularily trying to execute <code>document.documentElement.doScroll("left");</code>, as this snippet will throw an error until the DOM is ready.

General-purpose JS libraries such as jQuery offer cross-browser methods to detect that the DOM is ready. There are also standalone scripts that offer this feature : contentloaded.js (supports only one listener) and jquery.documentReady.js (doesn't depend on jQuery, despite its name).

Document Tags and Contributors

Contributors to this page: ethertank
最近更新: ethertank,