{{EventRef}}
The DOMContentLoaded event is fired when the initial HTML document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading. A very different event - load - should be used only to detect a fully-loaded page. It is an incredibly popular mistake to use load where DOMContentLoaded would be much more appropriate, so be cautious.
{{Note("Synchronous Javascript pauses parsing of the DOM.")}}
{{Note("There are also plenty of general-purpose and standalone libraries who offer cross-browser methods to detect that the DOM is ready.")}}
Speeding up
If you want DOM to get parsed as fast as possible after the user had requested the page, some things you could do is turn your JavaScript asynchronous and to optimize loading of stylesheets which if used as usual, slow down page load due to being loaded in parallel, "stealing" traffic from the main html document.
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
{{OpenEventProperties}}{{CloseEventProperties}}
Example
<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++)
{} // this synchronous script is going to delay parsing of the DOM. So the DOMContentLoaded event is going to launch later.
</script>
Browser compatibility
{{CompatibilityTable}}
| Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| Basic support | 1.0[1] | {{CompatGeckoDesktop("1")}}[1] | 9.0[2] | 9.0 | 3.1[1] |
| Feature | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Basic support | {{CompatVersionUnknown}}[1] | {{CompatGeckoMobile("1")}}[1] | {{CompatUnknown}}[2] | {{CompatVersionUnknown}} | {{CompatVersionUnknown}}[1] |
[1] Bubbling for this event is supported by at least Gecko 1.9.2, Chrome 6, and Safari 4.
[2] Internet Explorer 8 supports the readystatechange event, which can be used to detect when the DOM is ready. In earlier versions of Internet Explorer, this state can be detected by repeatedly trying to execute document.documentElement.doScroll("left");, as this snippet will throw an error until the DOM is ready.
Related Events
{{LoadRelatedEvents}}