Table of Contents
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>
