The “window.onload” and the “$(document).ready()” are used to execute JavaScript code when the page finishes loading, but the main difference is when they execute and how they are used. “window.onload” waits for all assets on the page to finish loading, including images and other external resources, whereas “$(document).ready()” waits for the DOM to be fully loaded but doesn’t wait for external resources like images to finish loading.
This post will define the difference/variations between “window.onload” and the “$(document).ready()”.
Difference Between “window.onload” and “$(document).ready()”
“window.onload” and “$(document).ready()” are different in executing JavaScript code when the page finishes loading. The following are the key variations between these two:
| “window.onload” | “$(document).ready()” |
| “window.onload” is a built-in JavaScript event. | “$(document).ready()” is specific for jQuery library. |
| It waits until all of the page’s assets have finished loading. | It waits for the DOM to be fully loaded but doesn’t wait for external resources. |
| It can cause slower page load times if heavy resources are being loaded. | Faster, as it doesn’t wait for all resources to be loaded. |
| Only one function can be assigned. | Multiple functions can be assigned and executed in order. |
| Compatible with all browsers. | Requires jQuery library. |
| Not recommended to attach event listeners, as it may cause performance issues. | Recommended for attaching event listeners to DOM elements. |
How to Use the “window.onload()” Method in JavaScript?
The “window.onload()” method is commonly used in JavaScript to perform actions or execute code after the page has finished loading.
Syntax
The following syntax is utilized for the JavaScript “window.onload” method:
// code
};
Or you can also use it as:
// code
}
window.onload = funcName();
Example
Call the “window.onload” event with a function “loading()” to show an alert() message on the page load:
alert("Page is Successfully loaded");
};
The output indicates that the function on the onload event will display after loading page:
How to Use “$(document).ready()” Function in JavaScript?
“$(document).ready()” function is an important part of the jQuery library. It executes JavaScript code as soon as the DOM is prepared for manipulation after the document has been loaded into the browser.
Syntax
Use the given syntax for the ready() function:
// code
});
Example
For using the “$(document).ready()” function, first add the jQuery library in the <head> tag:
Call the ready function to show an alert message while DOM is ready to manipulate:
alert("Page is Successfully loaded");
});
Output
That’s all about the “window.onload” and “$(document).ready()” function in JavaScript.
Conclusion
“window.onload” is a JavaScript “event” while the “$(document).ready()” is a “function” specific to the jQuery library. Both are being used to execute JavaScript code when the page finishes loading. The key distinction/variation between these two is that the “window.onload” waits for loading all assets on the page to finish loading. While the “$(document).ready()” waits for the DOM to be fully loaded but doesn’t wait for external resources. This post described the difference between “window.onload” and the “$(document).ready()” in JavaScript and its usage with examples.
