jQuery - What are differences between $(document).ready and $(window).load?
JqueryJquery Problem Overview
What are differences between
$(document).ready(function(){
//my code here
});
and
$(window).load(function(){
//my code here
});
And I want to make sure that:
$(document).ready(function(){
})
and
$(function(){
});
and
jQuery(document).ready(function(){
});
are the same.
Can you tell me what differences and similarities between them?
Jquery Solutions
Solution 1 - Jquery
$(document).ready(function() {
// executes when HTML-Document is loaded and DOM is ready
console.log("document is ready");
});
$(window).load(function() {
// executes when complete page is fully loaded, including all frames, objects and images
console.log("window is loaded");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Query 3.0 version
###Breaking change: .load(), .unload(), and .error() removed
> These methods are shortcuts for event operations, but had several API
> limitations. The event .load() method conflicted with the ajax .load()
> method. The .error() method could not be used with window.onerror
> because of the way the DOM method is defined. If you need to attach
> events by these names, use the .on() method, e.g. change
> $("img").load(fn) to $(img).on("load", fn).1
$(window).load(function() {});
Should be changed to
$(window).on('load', function (e) {})
These are all equivalent:
$(function(){
});
jQuery(document).ready(function(){
});
$(document).ready(function(){
});
$(document).on('ready', function(){
})
Solution 2 - Jquery
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 the 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.
Also read a related question:
https://stackoverflow.com/questions/4584373/difference-between-window-loadfunction-and-document-readyfunction
Solution 3 - Jquery
From the jQuery API Document
> While JavaScript provides the load event for executing code when a
> page is rendered, this event does not get triggered until all assets
> such as images have been completely received. In most cases, the
> script can be run as soon as the DOM hierarchy has been fully
> constructed. The handler passed to .ready() is guaranteed to be
> executed after the DOM is ready, so this is usually the best place to
> attach all other event handlers and run other jQuery code. When using
> scripts that rely on the value of CSS style properties, it's important
> to reference external stylesheets or embed style elements before
> referencing the scripts.
>
> In cases where code relies on loaded assets (for example, if the
> dimensions of an image are required), the code should be placed in a
> handler for the load event instead.
Answer to the second question -
No, they are identical as long as you are not using jQuery in no conflict mode.
Solution 4 - Jquery
These three functions are the same:
$(document).ready(function(){
})
and
$(function(){
});
and
jQuery(document).ready(function(){
});
here $ is used for define jQuery like $ = jQuery.
Now difference is that
$(document).readyis jQuery event that is fired whenDOMis loaded, so it’s fired when the document structure is ready.$(window).loadevent is fired after whole content is loaded like page contain images,css etc.
Solution 5 - Jquery
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. are loaded, but after the whole DOM itself is ready.
$(document).ready(function(){
})
and
$(function(){
});
and
jQuery(document).ready(function(){
});
There are not difference between the above 3 codes.
They are equivalent,but you may face conflict if any other JavaScript Frameworks uses the same dollar symbol $ as a shortcut name.
jQuery.noConflict();
jQuery.ready(function($){
//Code using $ as alias to jQuery
});
Solution 6 - Jquery
The ready event is always execute at the only html page is loaded to the browser and the functions are executed.... But the load event is executed at the time of all the page contents are loaded to the browser for the page..... we can use $ or jQuery when we use the noconflict() method in jquery scripts...
Solution 7 - Jquery
$(document).ready(function(e) {
// executes when HTML-Document is loaded and DOM is ready
console.log("page is loading now");
});
$(document).load(function(e) {
//when html page complete loaded
console.log("completely loaded");
});
Solution 8 - Jquery
> $(window).load is an event that fires when the DOM and all the content (everything) on the page is fully loaded like CSS, images and frames. One best example is if we want to get the actual image size or to get the details of anything we use it. > > $(document).ready() indicates that code in it need to be executed once the DOM got loaded and ready to be manipulated by script. It won't wait for the images to load for executing the jQuery script.
<script type = "text/javascript">
//$(window).load was deprecated in 1.8, and removed in jquery 3.0
// $(window).load(function() {
// alert("$(window).load fired");
// });
$(document).ready(function() {
alert("$(document).ready fired");
});
</script>
> $(window).load fired after the $(document).ready().
$(document).ready(function(){
})
//and
$(function(){
});
//and
jQuery(document).ready(function(){
});
> Above 3 are same, $ is the alias name of jQuery, you may face conflict if any other JavaScript Frameworks uses the same dollar symbol $. If u face conflict jQuery team provide a solution no-conflict read more. > > > $(window).load was deprecated in 1.8, and removed in jquery 3.0