JavaScript Events Page, DOM and Browser loading
Example
This is an example to explain the variations of load events.
- onload event
<body onload="someFunction()">
<img src="/?originalUrl=https%3A%2F%2Friptutorial.com%2F%26quot%3Bimage1%26quot%3B%2520%2F%26gt%3B%26lt%3Bimg%2520src%3D%26quot%3Bimage2%26quot%3B%2520%2F%26gt%3B%26lt%3B%2Fbody%26gt%3B%26lt%3Bscript%26gt%3B%2520%2520%2520%2520function%2520someFunction()%2520%257B%2520%2520%2520%2520console.log(%26quot%3BHi!%2520I%2520am%2520loaded%26quot%3B)%3B%257D%26lt%3B%2Fscript%26gt%3B%253C%2Fcode">In this case, the message is logged once all the contents of the page including the images and stylesheets(if any) are completely loaded.
-
DOMContentLoaded event
document.addEventListener("DOMContentLoaded", function(event) { console.log("Hello! I am loaded"); });
In the above code, the message is logged only after the DOM/document is loaded (ie:once the DOM is constructed).
-
Self-invoking anonymous function
(function(){ console.log("Hi I am an anonymous function! I am loaded"); })();
Here, the message gets logged as soon as the browser interprets the anonymous function. It means, this function can get executed even before the DOM is loaded.
