In JavaScript, this event serves to initiate a specific function once the webpage has completely rendered. Additionally, it can be utilized to determine the type and version of the user's browser. By employing the onload attribute, we can inspect which cookies are utilized by a particular page.
In HTML, the onload attribute is triggered once an object has successfully loaded. This attribute's primary function is to run a script at the moment the corresponding element is fully loaded.
In HTML, the onload attribute is typically associated with the <body> element to run a script after the entire content of the webpage—including CSS files, images, scripts, and other resources—has fully loaded. However, its usage is not restricted solely to the <body> tag; it can also be applied to various other HTML elements.
The distinction between document.onload and window.onload is as follows: document.onload activates prior to the loading of images and other external resources. It is executed before window.onload. In contrast, window.onload is triggered once the complete page has loaded, encompassing CSS files, script files, images, and more.
Syntax
window.onload = fun()
To gain a better understanding of this event, let’s explore a few examples.
Example1
In this illustration, a div element is defined with dimensions of 200px in height and 200px in width. In this scenario, we utilize the window.onload function to modify the background color, as well as the width and height of the div element, following the loading of the web page.
The background hue is configured to 'red', with both the width and height dimensions established at 300 pixels.
<!DOCTYPE html>
<html>
<head>
<meta charset = " utf-8">
<title> window.onload() </title>
<style type = "text/css">
#bg{
width: 200px;
height: 200px;
border: 4px solid blue;
}
</style>
<script type = "text/javascript">
window.onload = function(){
document.getElementById("bg").style.backgroundColor = "red";
document.getElementById("bg").style.width = "300px";
document.getElementById("bg").style.height = "300px";
}
</script>
</head>
<body>
<h2> This is an example of window.onload() </h2>
<div id = "bg"></div>
</body>
</html>
Output
Upon executing the code and refreshing the page, the resulting output will be -
Example2
In this illustration, we are creating a straightforward animation by utilizing the characteristics of the DOM object along with JavaScript functions. We employ the JavaScript method getElementById to retrieve the DOM object and subsequently store that object in a global variable.
<html>
<head>
<script type = "text/javascript">
var img = null;
function init(){
img = document.getElementById('myimg');
img.style.position = 'relative';
img.style.left = '50px';
}
function moveRight(){
img.style.left = parseInt(
img.style.left) + 100 + 'px';
}
window.onload = init;
</script>
</head>
<body>
<form>
<img id = "myimg" src = "https://placehold.co/400x300/3498db/ffffff?text=Sample+Image" />
<center>
<p>Click the below button to move the image right</p>
<input type = "button" value = "Click Me" onclick = "moveRight();" />
</center>
</form>
</body>
</html>
Output
Upon the successful completion of the aforementioned code, the resulting output will be -
At this point, we will examine an example that demonstrates the use of the HTML onload attribute in conjunction with JavaScript functions.
Example3
This is a straightforward illustration of utilizing the HTML onload attribute in conjunction with a function defined in JavaScript. In this scenario, the alert function is executed each time the document is reloaded.
<!DOCTYPE html>
<html>
<head>
<style>
</style>
<script>
function fun() {
alert("Hello World!!, Welcome to the logic-practice.com");
}
</script>
</head>
<body onload = "fun()">
<h1> Example of the HTML onload attribute </h1>
<p> Try to refresh the document to see the effect. </p>
</body>
</html>
Output
Upon running the code provided above, the resulting output will be -