Difference between DOMContentLoaded and load events
What is the difference between DOMContentLoaded and load events?
From the Mozilla Developer Center:
The DOMContentLoaded event is fired when the document has been
completely loaded and parsed, without waiting for stylesheets, images,
and subframes to finish loading (the load event can be used to detect
a fully-loaded page).
DOMContentLoaded event will fire as soon as the DOM hierarchy has been fully constructed, the
load event will do it when all the images and sub-frames have finished loading.
DOMContentLoaded will work on most modern browsers,
but not on IE including IE9 and above. There are some workarounds to mimic this event on older versions of IE, like the used on the jQuery library, they attach the IE specific
See the difference yourself:
From Microsoft IE
The DOMContentLoaded event fires when parsing of the current page is complete; the load event fires when all files have finished loading from all resources, including ads and images. DOMContentLoaded is a great event to use to hookup UI functionality to complex web pages.
The DOMContentLoaded event is fired when the document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading (the load event can be used to detect a fully-loaded page).
domContentLoaded: marks the point when both the DOM is ready and
meaning we can now (potentially) construct the render tree. Many
loadEvent: as a final step in every page load the browser fires
an “onload” event which can trigger additional application logic.