24

Possible Duplicate:
Difference between DOMContentLoaded and Load events

Whats the difference between

window.addEventListener("load", load, false);

and

document.addEventListener("DOMContentLoaded", load, false);

?

Community
  • 1
  • 1
Sudhir
  • 265
  • 1
  • 2
  • 7
  • you may find answer http://stackoverflow.com/questions/2414750/difference-between-domcontentloaded-and-load-events Fired on a Window object when a document's DOM content is finished loading, but unlike "load", does not wait until all images are loaded. – Fedor Skrynnikov Jan 12 '12 at 12:57

2 Answers2

37
  • DOMContentLoaded - the whole document (HTML) has been loaded.
  • load - the whole document and its resources (e.g. images, iframes, scripts) have been loaded.
Timo Tijhof
  • 9,597
  • 6
  • 31
  • 45
Krizz
  • 10,788
  • 1
  • 26
  • 42
  • So the render tree is built after DOMContentLoaded is fired. But DOMContentLoaded doesn't wait for images/sub-resources/subframes to finish loading according to https://developer.mozilla.org/en-US/docs/Web/API/Window/DOMContentLoaded_event. Do you know if these images/subframes/sub resources are called by the Render Tree after it was built, or were they already called by the DOM tree while the render tree was still being built? In other words, does the render tree triggers a bunch of connections to download these images/subframes/subresources or their downloads were already in progress before? – weefwefwqg3 May 12 '20 at 04:20
8

DOMContentLoaded awaits only for HTML and scripts to be loaded.
window.onload and iframe.onload triggers when the page is fully loaded with all dependent resources including images and styles.

Here is more details you can find http://javascript.info/tutorial/onload-ondomcontentloaded

Vadim Gulyakin
  • 1,255
  • 8
  • 7
  • Does `DOMContentLoaded` guarantee that all the scripts (including defer/async) have been loaded? Nothing is said here about scripts: https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded – Sergey Jan 17 '19 at 14:02
  • 1
    @Sergey Yes. `async` only refers to how the script is downloaded. With or without `async` will pause the document parser to evaluate as soon as it is downloaded. `defer` indicates "to a browser that the script is meant to be executed after the document has been parsed, but before firing DOMContentLoaded." – theflowersoftime Mar 14 '19 at 23:22