jquery masonry breaks(stacks images) in chrome/saf

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

<script>
        var container = document.querySelector('#masonry');
        var msnry = new Masonry( container, {
            itemSelector: '.item',
            "columnWidth": 200,
        });
        $('.item img').load(function(){
                var msnry = new Masonry( container, {
                itemSelector: '.item',
                "columnWidth": 200,
            });
        })
</script>

Answer 2

On Firefox and on my iPad 2 masonry was working fine but in chrome and safari on OS X the elements were overlapping/stacking on page load and until a window resize even happen. After digging in the code of jquery.masonry.js I found that I can trigger a resize() right after creating the masonry so that all elements rearrange properly. Now everything is working fine.

jQuery(document).ready(function(){
var $container = $('#container');
$container.imagesLoaded(function(){
    $container.masonry({
    itemsSelector: '.thumbnail',
    isFitWidth: true
    }).resize();
}); 
})

all of the other solutions: (window).load, setting width & height in CSS and on img attributes, etc, just didn't work for me.

Answer 3

I recently came across this issue. To fix it, I utilized the img width and height attributes. The issue resolved itself.

Answer 4

The "load" event will trigger for every image in the DOM, this is overkill. You need to update the layout of the masonry when the last image in the DOM loads. Here is the code:

$(document).ready(function(){
    // init the masonry on document ready event;
    // at this point the images are not loaded so the layout will break UNLESS you set up the correct values for the "width" and "height" attributes of the img tags
    $('.content_photo').masonry();

    // to make sure the layout will not break apart we update the masonry layout just after the last image from the DOM was loaded
    var total_images = $('img').length;
    var counter = 1;
    $('img').load(function() {
        if(counter == total_images) {
            alert('the last image in the DOM was loaded. now we can update the masonry layout');
            $('.content_photo').masonry('layout');
        }
        counter++;
    });
});

Answer 5

Another way, if you know the image heights, is to assign them in the CSS before you load Masonry, then the layout is faster than waiting for the images. This method works if, for example, all your images are the same size. Then your site will still load quickly on slow connections, like mobile.

I posted a bit of script for alternative method here:
http://instancia.net/loading-jquery-masonry-on-mobile/

If you use this script, edit the numbers to match yours.

Answer 6

Tried everything suggested in this thread, nothing worked, then found this:

$(window).load(function(){   $('#content').masonry(); });

Works fine now, found it here: https://github.com/desandro/masonry/issues/35

Original post author: https://github.com/desandro