load and DOMContentLoaded event

Document: DOMContentLoaded event

The DOMContentLoaded event is fired when the initial HTML document has been completely loaded and parsed, and all deferred scripts (<script defer src=""> and <script type="module">) have downloaded and executed, without waiting for stylesheest, images, and subframes to finish loading.

document.addEventListener("DOMContentLoaded", (event) => {
  console.log("DOM fully loaded and parsed");
});

In many cases, using DOMContentLoaded is sufficient, without needed the window load event - which detect a fully-loaded page.

Window: load event

window's load event is only fired after the DOM and all dependent resources and assets have loaded.

window.addEventListener("load", (event) => {
  console.log("page is fully loaded");
});
 
// or
window.onload = (event) => {
  console.log("page is fully loaded");
};

References

• https://developer.mozilla.org/en-US/docs/Web/API/Document/DOMContentLoaded_event
• https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event