$(doucment).ready(function(){}); and $(window).load(function() {}); confusion

Question

Hello guys,

My test product page over at http://www.marioplanet.com/product.htm has some odd behaviors which I could really use some help working out.

Now, I had a problem previously with my image resizing, and someone here helped me out by saying that I should nest the image resize inside a

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

In order for the images to load before the resize occurs, so that the resize wouldn't find an incorrect width and height, since it wouldn't have loaded yet, instead of nesting it within the document ready function.

Now that I have done this, I'm wondering what I should do with the jQuery that is nested within my document ready function, as it is the fancybox jQuery plugin, and it doesn't appear to be functioning correctly.

If I move the fancybox jQuery from the document ready to the window load function, for some reason, none of it works!

I could really use some help here, so any info or suggestions are greatly appreciated!

Thanks!

UPDATE:

Just as a side note, it would be nice to figure out how to make the images not load at all, and just load once the scaled-down effect was applied to the images, so the images don't show up big and then out of nowhere, shrink down.

Answer 1

$(document).ready(...); is for when DOMContentLoaded is called. This happens after the DOM is fully created, but before images and other externals are finished downloading. After that happens, load is triggered, which can be listened for via $(window).load(...);. Please don't use jQuery for something as simple as this!