jquery masonry breaks(stacks images) in chrome/safari but only on first load

Question

It seems that when I try to load the page, all the images are stacked on top of one another. But if you were to click a link which takes you to the same page (like the home link) then masonry kicks in. So I think masonry is loading too early, like before jquery readies the page or something.

Here my jquery call:

$(document).ready(function(){
    $('#image_roll_container').masonry({
        itemSelector: '.box'
    });

....

Here's the page in question:

http://ratattoos.com/

it works just fine in firefox and IE8.

Answer 1

I've managed to fix this problem with the following tweak:

<script type="text/javascript">
    $(document).ready(function(){
        $('img').load(function(){
            $(".content_photo").masonry();
        });
        $(".content_photo").masonry();
    });
</script>

Answer 2

looks like I needed a plugin called imagesLoaded in order for the Monsry script to work properly with the likes of chrome and safari