Difference between $(document).ready(function(){}); and $(window).load(function(){});

When I have started learning I was bit confused about what is the difference between $(document).ready(function(){}) and $(window).load(function(){}) is all about and when does these scenarios will help while coding. I gone through so many articles in this regard from this web world and done some research on the same.

This article might help people who are at beginner level and what to know more about $(document).ready(function(){}) and $(window).load(function(){}) in jQuery.

$(document).ready(function(){}):

If you want to execute a function when the DOM [example: an 'element'] is fully loaded, then you can specify that function in $(document).ready(function(){});
If you want to know more about this, you can visit one good site named “learningjquery“. Karl Swedberg has explained clearly about the same with an example of how to start coding in jQuery.

1 2 3 4 5

<script language="javascript"> $(document).ready(function() { // execute when the DOM [example: an 'element'] is fully loaded }); </script>

$(window).load(function(){}):

This executes when the complete page is fully loaded that is when all items are fully loaded on the page which includes all images, iframes, objects etc., This helps when you want to play with images which has been loaded on the page, for example: if you want to know the width and height of the particular image or if you want to adjust the alignment of the image inside a ‘div’ element lets say vertical middle in a div.

1 2 3 4 5

<script language="javascript"> $(window).load(function() { // executes when complete page is fully loaded, including all images, iframes etc., }); </script>

If you have more examples of this sort, please do share the same in comments section below. It would help people like me to understand and to learn quickly