jQuery isotope on first load doesn't work, How do I wait for all resources/images to be loaded?

Question

I've got something I've put together using jQuery isotope here.. http://jsbin.com/eziqeq/6/edit

It seems to work in general but on first load, of a new tab, the Isotope plugin is setting the height of the wrapper element to 0. If I refresh the page it does work and sets the height of the parent element based on the the items found inside.

Any help would be greatly appreciated. I can't think why off this first load this isn't working and on subsequent reloads it is.. unless its perhaps something to do with caching the images it loads?

EDIT--

This is a caching issue in Webkit browsers as it works on Firefox and on a working tab when I clear the cache and refresh the page it won't work until refreshed again.

Answer 1

You could use a plugin as suggested by mkoryak.

or you could use the following: (no plugin required - jQuery only):

// jQuery - Wait until images (and other resources) are loaded
$(window).load(function(){
    // All images, css style sheets and external resources are loaded!
    alert('All resources have loaded');
});

Using the above method, you can also be sure that all the CSS stylesheets are loaded as well (to make sure your page is displayed properly when isotope kicks in).

"DOM ready" fires when the DOM is ready (ie the markup).

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

"Window load" waits for all the resources and then fires.

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

Note: (by @DACrosby): load() won't always fire if the images are cached (ie, they're not presently being loaded from the site - you're using your local copy).