JavaScript Internals (521 Qs)•Part 2: Promises, Callbacks, Async & Strict Mode (54 - 103)
What is the difference between document load and DOMContentLoaded events
The DOMContentLoaded event is fired when the initial HTML document has been completely loaded and parsed, without waiting for assets(stylesheets, images, and subframes) to finish loading. Whereas The load event is fired when the whole page has loaded, including all dependent resources(stylesheets, images).
Practical Code Example
javascript
// DOMContentLoaded: HTML parsed & DOM tree constructed (scripts ready, images still loading)
document.addEventListener('DOMContentLoaded', () => {
console.log('DOM ready for manipulation!');
});
// window.onload: Everything finished loading (including stylesheets, images, iframes)
window.addEventListener('load', () => {
console.log('All images and resources fully loaded');
});