Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Window.onload vs onDocumentReady in javascript
In JavaScript, window.onload and $(document).ready() are two different methods for executing code when a page loads, each with distinct timing and behavior.
Window.onload
The window.onload method executes after the entire web page has completely loaded, including all DOM elements, stylesheets, images, and other external resources. It only allows one function assignment ? subsequent assignments will overwrite previous ones.
Syntax
window.onload = function() {
// Code executes after everything loads
};
window.onload = (event) => {
// Arrow function syntax
};
Example: Window.onload Behavior
<!DOCTYPE html>
<html>
<head>
<title>window.onload Example</title>
</head>
<body>
<h1>Window Onload Test</h1>
<script>
window.onload = function() {
console.log("First onload - will be overwritten");
};
window.onload = function() {
console.log("Second onload - this will execute");
document.body.style.backgroundColor = "lightblue";
};
</script>
</body>
</html>
Second onload - this will execute
Only the second window.onload function executes because it overwrites the first one.
Document Ready (jQuery)
The $(document).ready() method executes as soon as the DOM is fully constructed, without waiting for images and other external resources. Multiple ready functions can be defined and all will execute.
Syntax
$(document).ready(function() {
// Code executes when DOM is ready
});
// Shorthand syntax
$(function() {
// Same as document.ready
});
Example: Document Ready
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
console.log("First ready function");
$("button").click(function() {
$("p").slideToggle();
});
});
$(document).ready(function() {
console.log("Second ready function - also executes");
});
</script>
</head>
<body>
<p>Click the button to toggle this paragraph</p>
<button>Toggle Text</button>
</body>
</html>
First ready function Second ready function - also executes
Comparison
| Feature | window.onload | $(document).ready() |
|---|---|---|
| Execution Timing | After all resources load | After DOM is ready |
| Multiple Functions | Only last one executes | All functions execute |
| Speed | Slower | Faster |
| Dependencies | Pure JavaScript | Requires jQuery |
Modern Alternative: DOMContentLoaded
For pure JavaScript without jQuery, use the DOMContentLoaded event which behaves similarly to $(document).ready():
document.addEventListener('DOMContentLoaded', function() {
console.log("DOM is ready - no jQuery needed");
// Your code here
});
DOM is ready - no jQuery needed
Conclusion
Use $(document).ready() or DOMContentLoaded for faster DOM manipulation, and window.onload only when you need all resources loaded. The modern approach favors DOMContentLoaded for better performance.
6K+ Views
