Menu
In simple words, window. load is called when all content of window is loaded whereas document. ready is called when DOM is loaded and document structure is ready.
So technically they are both the same. Not major difference between these two declaration. They used based on weather you use JavaScript then you should use $(document). ready declaration in other case you use jQuery library which is a part of JavaScript then you should use $(function) declaration.
The major difference between the JavaScript's onload and jQuery's $(document). ready(function) method is that: The onload executes a block of code after the page is completely loaded while $(document). ready(function) executes a block of code once the DOM is ready.
The Difference between $(document). ready() and $(window). load() functions is that the code included inside $(window). load() will run once the entire page(images, iframes, stylesheets,etc) are loaded whereas the document ready event fires before all images,iframes etc.
document.ready is a jQuery event, it runs when the DOM is ready, e.g. all elements are there to be found/used, but not necessarily all content.window.onload fires later (or at the same time in the worst/failing cases) when images and such are loaded, so if you're using image dimensions for example, you often want to use this instead.$(document).ready(function() {
// executes when HTML-Document is loaded and DOM is ready
alert("document is ready");
});
$(window).load(function() {
// executes when complete page is fully loaded, including all frames, objects and images
alert("window is loaded");
});
The $(window).load() is NOT available in jQuery 3.0
$( window ).load(function() {
// Handler for .load() called.
});
To get around it, you can use it as an "Event Handler Attachment"
$( window ).on("load", function() {
// Handler for .load() called.
});
The difference are:
$(document).ready(function() { is jQuery event that is fired when DOM is loaded, so it’s fired when the document structure is ready.
$(window).load() event is fired after whole content is loaded.
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$( document ).ready(function() {
alert( "document loaded" );
});
$( window ).load(function() {
alert( "window loaded" );
});
</script>
</head>
<body>
<iframe src="http://stackoverflow.com"></iframe>
</body>
</html>
window.load will be triggered after all the iframe content is loaded
$(document).ready happens when all the elements are present in the DOM, but not necessarily all content.
$(document).ready(function() {
alert("document is ready");
});
window.onload or $(window).load() happens after all the content resources (images, etc) have been loaded.
$(window).load(function() {
alert("window is loaded");
});
From jquery prospective - it's just adding load/onload event to window and document.
Check this out:
window.onload vs document.onload
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With