Updated March 28, 2023
Introduction to jQuery onload
In JavaScript, we have an event handler associated with the Window object which is called download. The onload event handler executes the required function when the onload event occurs which in turn occurs when an object is fully loaded along with all its associated resources. The onload event can be applied when it is required to execute a function once and only when the web page is completely loaded including all images, scripts, CSS files, etc.
The onload event can be used to automatically check visitors’ browser type and version and manages to load the correct version of the page as per the information from the user browser. This event can also be used for checking the cookies. The onload method is supported by all popular browsers. onload is generally used within the <body> element which executes a script after the page has fully loaded with all the content and not just the DOM.
Syntax:
<body onload="functionToBeExecuted">Where,
- functionToBeExecuted refers to the function which gets executed once the page is completely loaded.
Examples to Implement jQuery onload Method
Let us take a look at few examples to understand how an onload event can be implemented in web pages.
Example #1
The following example illustrates how the onload event can display an alert message as soon as the page is loaded.
Code:
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<style>
#divstyle {
text-align: center;
background-color: cadetblue;
width: 550px;
height: 180px;
margin-left: 100px;
}
</style>
</head>
<body onload="myFunction()">
<div id="divstyle">
<h2>Welcome to the tutorial for onload event!</h2>
<hr />
<h3>The function will be executed once the page is fully loaded.</h3>
</div>
<script>
function myFunction() {
alert("Hello, User!");
}
</script>
</body>
</html>Output
- As soon as the above code gets executed, the below screen gets loaded in the web page.
- In the below-attached screenshot, we see an alert box popping up displaying a specific message and a button.
- This is an example of greeting / welcoming messages which start as soon as the resources are loaded on the page.
- It illustrates how greeting messages can be incorporated into your web pages using jQuery onload event.
- On clicking the “OK” button in the alert box, the alert box disappears and the below screen shows up.
Example #2
In the following example, we are using a jQuery onload event to deal with the cookies.
Code:
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<style>
#divstyle {
text-align: center;
background-color: cadetblue;
width: 400px;
height: 150px;
margin-left: 100px;
}
#status {
font-size: large;
color: brown;
font-weight: bold;
}
</style></head>
<body onload="checkCookies()">
<div id="divstyle">
<h2>Are cookies enabled?</h2>
<hr />
<p id="status"></p>
</div>
<script>
function checkCookies() {
var text = "";
if (navigator.cookieEnabled == true) {
text = "Enabled.";
} else {
text = "Disabled.";
}
document.getElementById("status").innerHTML = txt;
}
</script>
</body>
</html>Output
- The below screenshot is of the output which gets displayed on the page once the above code is executed.
- Once the page is completely loaded along with all its resources, function checkCookies() gets launched.
Note:
- ready() event and body.onload() event, both have a similar work to do, that is, execute the script when the page is loaded, but there is a key difference between the two.
- The difference is, onload() event gets called only after the entire DOM along with the associated resources is completely loaded, whereas, jQuery’s document.ready() event gets called once the DOM is loaded without waiting for the associated resources, for example, images,script files, etc. to get loaded.
- There can be multiple ready() events in a page but body.onload() event can be only one.
Example #3
In the following example, we are trying to demonstrate how jQuery document ready() event is different from jQuery onload event.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Example for jQuery ready()</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function() {
$("p").text("The DOM is loaded and can be manipulated now.");
});
</script>
<style>
#divstyle {
text-align: center;
background-color: cadetblue;
width: 400px;
height: 150px;
margin-left: 100px;
}
p {
color: crimson;
margin-left: 120px;
}
</style>
</head>
<body>
<p>Not loaded.</p>
<div id="divstyle">
<h2>Do your manipulations now.</h2>
<hr />
<b style="color: darkblue;">
With jQuery document ready event, function gets executed once the page
is loaded no matter if other resources have been loaded.
</b>
</div>
</body>
</html>Output:
- The below screenshot shows the output when the above code gets executed.
- A message gets displayed on the web page when the DOM is loaded.
Conclusion
- In this article, we discussed how we can run a JavaScript only after the entire page is loaded.
- jQuery provides two methods for this purpose, jQuery document ready() and jQuery onload() for this purpose.
- jQuery document ready event is fired only when the DOM is loaded, no matter if all other associated resources have been loaded or not.
- jQuery onload event is fired when the page is fully loaded along with all the associated images, scripts, files, etc.
- The onload event can be used to identify the visitor’s browser type and version and then load the pages accordingly.
- This is also used to deal with the cookies.
Recommended Articles
This is a guide to jQuery onload. Here we discuss the Introduction and syntax of jquery onload along with different examples and its code implementation. You may also have a look at the following articles to learn more –
