DOMContentLoaded vs window.onload

You've been waiting for a friend to come and play, but they haven't come yet, you'd probably be bored and sad, wouldn't you?
That's a little like the way it works when you load your website. Your computer will have to open all the pictures, words, and videos that make up this website when you visit a Web site. It may take some time to put everything in order, especially if the site is large.
That is exactly what DOMContentLoaded and window.onload wants to avoid by making sure that everything on the website is loaded properly so that visitors don't have to wait for a long time to see the website.

window.onload is like a signal that tells the website that everything has finished loading. It's like your friend finally showing up to play after you've been waiting for a long time.

Here's an example of how window.onload works in code:

window.onload = function() {
  // This code will only run when the page has finished loading
  alert('The website is fully loaded!');
};

The DOMContent Loaded is a little bit of a different. It's like a signal that tells the website that the basic structure has been loaded, but some of the pictures and videos may still be loading. It feels like your friend's come, but so far they haven't brought all the toys.
This is a code example of how DOMContentLoaded works.

document.addEventListener('DOMContentLoaded', function() {
  // This code runs when the basic structure of the page has loaded
  alert('The website structure has loaded!');
});

The basic contents that need to be loaded before the DOMContentLoaded event is fired are the elements that are required for the page layout and structure to be visible and functional to the user, while the other contents such as images and videos are usually considered secondary contents that can be loaded later without affecting the functionality of the page.

By using these events, website developers can make sure that the website loads as quickly as possible, and that visitors can start interacting with the website as soon as the basic structure is loaded. This helps to provide a better user experience and ensures that visitors don't get bored or irritated while waiting for the website to load.

In summary, window.onload and DOMContentLoaded are signals that tell the website when everything is finished loading, or when the basic structure of the website is loaded. It's like you're waiting for a friend to show up to play, and you're happy when he finally shows up.

If you found this article helpful or informative, I would love to hear from you! Please feel free to leave a comment or like the post to let me know your thoughts. Your feedback is greatly appreciated. Thank you for reading!

My name is Nwosa Tochukwu and I'm a Junior Front-end developer (REACTJS)