jQuery isotope on first load doesn't work, How

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

Note:
1.you should call iso-top function inside windwo load event (it will wait for resources to be loaded) also you can call function in footer.

2.confirm that function call after css load.

$(window).load(function(){
     $('.iso').isotope({
     // options
     itemSelector: '.item',
     layoutMode: 'masonry'
    });
   });

also can use image preloader plugin for images loading first
http://www.createjs.com/#!/PreloadJS