How To Handle Document Load Event in JavaScript

When a page finishes loading, the “load” event fires on the window and the document body objects. Most web applications need notification from the web browser to tell them when the document has been loaded and is ready to be manipulated. There are mainly three methods for handling load events, which are load, DOMContentLoaded and readystatechange.The load event in the window object included an onLoad() utility function. This is often used to schedule initialization actions that require the whole document to have been built. The load event does not fire until a document and all of its images are fully loaded.

The second method DOMContentLoaded event is fired when the document has been loaded and parsed and any deferred scripts have been executed. Images and async scripts may still be loading, but the document is ready to be manipulated.

Using Load Event

The handler window.onload and document.onload triggers when the page is fully loaded with all dependent resources including images and styles. You can apply onload event for any HTML element if you want to manipulate it when it is completely loaded. For example, to make slide effect on images in image slideshow, all the images should be loaded before sliding script executed.

Here is an example script, where browser displays alert message when window was completely loaded.

<script>
window.onload = function() {
alert('Window was loaded')      
}
</script>

The following script shows the alert message when the <div> with id ‘eb’ is completely loaded.

HTML Code:

<div id='eb'>
//Add scripts here
</div>

JavaScript Code:

<script>
document.getElementById('eb').onload = function(){
alert('Example badge was loaded')
}
</script>

Using DOMContentLoaded event

The function document.addEventListener(“DOMContentLoaded”, handler, false) triggers the handler when the document has been loaded and parsed and any deferred scripts have been executed.

<script>
function handler(){
alert('Document was loaded')
}
document.addEventListener("DOMContentLoaded", handler, false)
</script>

Using readystatechange event

The document.readystate property changes as the document loads. Here is an example for the uses of document.readystatechange event for document load event.

<script>
function handler(){
alert('Document was loaded-readystatechange')
}
document.addEventListener("readystatechange", handler, false)
</script>

The DOMContentLoaded event was supported by all the browser except IE before IE9. For IE before IE9, you can use document.onreadystatechange method to handle load event as given on the example below.

<script>
document.attachEvent("onreadystatechange",function(){
if (document.readyState === "complete") {
alert('Document was loaded')
}
})
</script>

For all the other old browsers that does not support “DOMContentLoaded” can use the load method as given below.

<script>
if (window.addEventListener)
window.addEventListener('load', handler, false)
else if (window.attachEvent)
window.attachEvent('onload', handler)
function handler() {
alert("Document was loaded");
}
</script>

Cross browser Code for DOMContentLoaded Event

Here is a cross browser code which uses DOMContentLoaded and readystatechange events and uses load events only as backup for older browsers that do not support the earlier events.

<script>
function handler(){
alert('Document was loaded')
}
if (document.addEventListener) { 
document.addEventListener("DOMContentLoaded", handler, false)
document.addEventListener("readystatechange", handler, false)
window.addEventListener('load', handler, false)
}
else if (document.attachEvent) {
document.attachEvent("onreadystatechange", handler, false)
window.attachEvent('onload', handler)
}
</script>

Read Next:How To Handle Mouse Event In JavaScript