The DOMContentLoaded
event fires when the initial HTML document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading.
Bubbles | Yes |
---|---|
Cancelable | Yes (although specified as a simple event that isn't cancelable) |
Interface | Event |
Event handler property | None |
A different event, load
, should be used only to detect a fully-loaded page. It is a common mistake to use load
where DOMContentLoaded
would be more appropriate.
Synchronous JavaScript pauses parsing of the DOM. If you want the DOM to get parsed as fast as possible after the user has requested the page, you can make your JavaScript asynchronous and optimize loading of stylesheets. If loaded as usual, stylesheets slow down DOM parsing as they're loaded in parallel, "stealing" traffic from the main HTML document.
Examples
Basic usage
document.addEventListener('DOMContentLoaded', (event) => { console.log('DOM fully loaded and parsed'); });
Delaying DOMContentLoaded
<script> document.addEventListener('DOMContentLoaded', (event) => { console.log('DOM fully loaded and parsed'); }); for( let 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>
Checking whether loading is already complete
DOMContentLoaded
may fire before your script has a chance to run, so it is wise to check before adding a listener.
function doSomething() { console.info('DOM loaded'); } if (document.readyState === 'loading') { // Loading hasn't finished yet document.addEventListener('DOMContentLoaded', doSomething); } else { // `DOMContentLoaded` has already fired doSomething(); }
Live example
HTML
<div class="controls"> <button id="reload" type="button">Reload</button> </div> <div class="event-log"> <label>Event log:</label> <textarea readonly class="event-log-contents" rows="8" cols="30"></textarea> </div>
CSS
body { display: grid; grid-template-areas: "control log"; } .controls { grid-area: control; display: flex; align-items: center; justify-content: center; } .event-log { grid-area: log; } .event-log-contents { resize: none; } label, button { display: block; } #reload { height: 2rem; }
JS
const log = document.querySelector('.event-log-contents'); const reload = document.querySelector('#reload'); reload.addEventListener('click', () => { log.textContent =''; window.setTimeout(() => { window.location.reload(true); }, 200); }); window.addEventListener('load', (event) => { log.textContent = log.textContent + 'load\n'; }); document.addEventListener('readystatechange', (event) => { log.textContent = log.textContent + `readystate: ${document.readyState}\n`; }); document.addEventListener('DOMContentLoaded', (event) => { log.textContent = log.textContent + `DOMContentLoaded\n`; });
Result
Specifications
Specification | Status | Comment |
---|---|---|
HTML Living Standard The definition of 'DOMContentLoaded' in that specification. |
Living Standard | |
HTML5 The definition of 'DOMContentLoaded' in that specification. |
Recommendation |
Browser compatibility
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
DOMContentLoaded event | Chrome Full support 1 | Edge Full support 12 | Firefox Full support 1 | IE Full support 9 | Opera Full support 9 | Safari Full support 3.1 | WebView Android Full support 1 | Chrome Android Full support 18 | Firefox Android Full support 4 | Opera Android Full support 10.1 | Safari iOS Full support 2 | Samsung Internet Android Full support 1.0 |
Legend
- Full support
- Full support
See also
- Related events:
load
,readystatechange
,beforeunload
,unload
- This event on
Window
targets:DOMContentLoaded