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)
Top comments (5)
I'm a Chinese frontend engineer, I have not register the DEV account until I seen your article which really help me to understand the diff between "load" and 'content load'. Tanks so much.
Also I want to supplement a picture to make the article more clearly.
Thank you
Super cute and helpful article! Thanks for the entertaining explanation 😁
Thanks... Glad you enjoyed reading it