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 Is

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).