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

There is another option to solve this issue. You have to use another one js if your grid-item contain any image. below the js link is

<script src='http://imagesloaded.desandro.com/imagesloaded.pkgd.js'></script>

Then call this placeholder js below:

/*=============Code for Masonry Gallery ==============*/
    var grid = document.querySelector('.grid');
    var jQuerygrid = jQuery('.grid').isotope({
        itemSelector: '.element-item'
    }); 
    var iso = jQuerygrid.data('isotope');
    jQuerygrid.isotope( 'reveal', iso.items );

    imagesLoaded(grid, function(){
        iso.layout();
    });

You can get full and clear details from isotop's official website. link