Difference between DOMContentLoaded and load events

Question

What is the difference between DOMContentLoaded and load events

User · Answer

DOMContentLoaded  window onDomReady   Load  window onLoad    A page can t be manipulated safely until the document is  quot ready  quot  jQuery detects this state of readiness for you  Code included inside   document  ready   will only run once the page Document Object Model  DOM  is ready for JavaScript code to execute  Code included inside   window  load function            will run once the entire page  images or iframes   not just the DOM  is ready   See  Using JQuery Core s document-ready documentation

User · Answer

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

User · Answer

See the difference yourself   DEMO  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    From Mozilla Developer Network     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

User · Answer

Here s some code that works for us  We found MSIE to be hit and miss with DomContentLoaded  there appears to be some delay when no additional resources are cached  up to 300ms based on our console logging   and it triggers too fast when they are cached  So we resorted to a fallback for MISE  You also want to trigger the doStuff   function whether DomContentLoaded triggers before or after your external JS files      detect MSIE 9 10 11  but not Edge ua navigator userAgent toLowerCase   isIE  msie  test ua    function doStuff             if isIE          play it safe  very few users  exec ur JS when all resources are loaded     window onload function   doStuff       else          add event listener to trigger your function when DOMContentLoaded     if document readyState    loading            document addEventListener  DOMContentLoaded  doStuff         else              DOMContentLoaded already loaded  so better trigger your function         doStuff

User · Answer

domContentLoaded  marks the point when both the DOM is ready and  there are no stylesheets that are blocking JavaScript execution -  meaning we can now  potentially  construct the render tree  Many JavaScript frameworks wait for this event before they start executing their own logic  For this reason the browser captures the EventStart and EventEnd timestamps to allow us to track how long this execution  took   loadEvent  as a final step in every page load the browser fires an    onload    event which can trigger additional application logic    source

User · Answer

The 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 onreadystatechange event

[javascript] Difference between DOMContentLoaded and load events

Examples related to javascript

Examples related to browser