jQuery is a thing of beauty. There are so many things that can be done with jQuery that it’s a shame that more people don’t use it. One question I’ve seen asked over and over again is what’s the difference between $(document).ready and $(window).load? I’m sure that there’s more to it than this, but here’s my quick explanation of it:
$(document).ready – This function will fire once all of the html elements have been loaded. Once all tags have been loaded, then this will fire.
$(window).load – This function will fire once EVERYTHING is ready. This basically means once all the images have been loaded.
The main difference that I’ve found is that $(document).ready fires before any resources have been loaded (just the DOM elements have been added) and $(window).load fires once everything is done.
So when do you use each? If you the jQuery you are running requires you to fix/adjust any image attributes (like width, height, etc.), then you’ll need to use the $(window).load function. If you are just adjusting the dom elements, then you can use $(document).ready.
There is an exception to the image attributes. If you define the width and height of an image (either in CSS or inline), then you can use $(document).ready and access those attributes.