Window.onload vs $(document).ready in jQuery
-
JavaScript
onloadEvent -
jQuery
readyEvent -
Differences Between
Window.onloadand$(document).readyEvents
The onload is an event handler used to execute the required function when the onload event occurs, and the $(document).ready will occur when DOM document object model has been loaded. This tutorial demonstrates how to use onload and ready() methods in jQuery.
JavaScript onload Event
The onload function works when the object is fully loaded with its resources. It is mainly used when we require to execute a function when a webpage is fully loaded, including every resource.
The onload event is also used to check the cookies. It can also be used to check the visitors, version, and browser type when a correct version of the page is loaded based on the information from the user browser.
The onload function is used within the body. All mainly used browsers support this method because it is a built-in JavaScript function.
The syntax for the onload function is:
<body onload="Method">
Let’s try a simple example that shows an alert message when the page is fully loaded:
<!DOCTYPE html>
<html>
<head>
<style>
#OnloadDiv {
background-color: #DAA520;
width: 800px;
height: 300px;
margin-left: 120px;
text-align: center;
}
</style>
</head>
<body onload="DemoFunction()">
<div id="OnloadDiv">
<h2>Hello this is demonstration of onload event in jQuery!</h2>
<h3>Once the page is fully loaded, the Demo Function will be loaded</h3>
</div>
<script>
function DemoFunction() {
alert("Hello, This is alert from delftstack.com!");
}
</script>
</body>
</html>
The code above will load an alert event when the page is fully loaded. See output:
As mentioned above, the onload event can be used to check the cookies. Let’s try an example to check cookies:
<!DOCTYPE html>
<html>
<head>
<style>
#Cookiediv {
background-color: #DAA520;
text-align: center;
width: 600px;
height: 200px;
margin-left: 120px;
}
#Cookie_Status {
font-size: large;
font-weight: bold;
color: White;
}
</style>
</head>
<body onload="checkCookies()">
<div id="Cookiediv">
<h2>See the answer below if the cookies are enabled or disabled?</h2>
<p id="Cookie_Status"></p>
</div>
<script>
function checkCookies() {
var Cookie_text = "";
if (navigator.cookieEnabled == true) {
Cookie_text = "Cookies are Enabled.";
}
else {
Cookie_text = "Cookies are Disabled.";
}
document.getElementById("Cookie_Status").innerHTML = Cookie_text;
}
</script>
</body>
</html>
The code above will check if the cookies are enabled or not when the page is completely loaded:
jQuery ready Event
The ready event will occur when the DOM is loaded. This event occurs when the document is fully ready, convenient for the jQuery methods and events.
The ready event is not used in the tag <body onload="">. Let’s try an example to show how the $(document).ready event works in jQuery:
<html>
<head>
<title>jQuery Ready Method</title>
<script src = "https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function() {
$("#Demo_Div").click(function() {
alert("Hello, This is delftstack.com");
});
});
</script>
</head>
<body>
<div id = "Demo_Div">
Click the div to see the alert.
</div>
</body>
</html>
The code above will ask for the click once the document is ready. It will show an alert once we click on the document is ready.
See output:
Differences Between Window.onload and $(document).ready Events
Although the window.onload and $(document).ready work similarly, they still have some differences, which are given below:
-
The obvious difference is that
window.onloadis a pure JavaScript event; that is why it is available in most libraries and browsers. On the other hand,$(document).readyis a jQuery event which means it is only available in the jQuery library. -
The other main difference is that
window.onloadwill wait for the content like images and videos to load; that is why it takes a lot of time. Until the large data is loaded, no other code will be executed.On the other hand,
$(document).readyis DOM-based. Once the DOM is loaded, it will execute the other code; it will not wait for the other stuff to load. -
window.onloadconsumes more time than$(document).ready.
Sheeraz is a Doctorate fellow in Computer Science at Northwestern Polytechnical University, Xian, China. He has 7 years of Software Development experience in AI, Web, Database, and Desktop technologies. He writes tutorials in Java, PHP, Python, GoLang, R, etc., to help beginners learn the field of Computer Science.
LinkedIn Facebook