Masonry- divs overlapping with imagesLoaded plugin

Question

I have the Masonry plugin and the Images Loaded plugin and it seems imagesloaded isn't working. When I refresh the page the divs overlap. Only after resizing the browser window does the overlapping corrects itself. Sometimes upon refreshing it seems it does work... it's pretty random. I'm a newbie with jQuery and javascript.

I hosted the single html page here so you can see what I'm talking about: masonry test

Here's how I'm initializing, but you can see the full code if you look at the source code for the link above because the problem might be elsewhere.

$(document).ready(function() {

    // Initialize Masonry
    $('#content').masonry({
        columnWidth: 320,
        itemSelector: '.item',
        isFitWidth: true,
        isAnimated: true,
    }).imagesLoaded(function() {
        $(this).masonry('reload');
    }); 
});

Answer 1

The problem is that imagesLoaded() is being called before the masonry plugin finishes initializing. If you look in the browser console on your test page, you will see an error to that affect.

Take a look at the example on the developer's site for how to use imagesLoaded together with masonry. Instead of chaining the functions, you should wait until the images have loaded to initialize masonry.

$('#content').imagesLoaded(function() {
    $('#content').masonry({
        columnWidth: 320,
        itemSelector: '.item',
        isFitWidth: true,
        isAnimated: true,
    });
});

You might be able to do it how you originally attempted (ie. chaining the methods), but you cannot use $(this) in your imagesLoaded function. This function is a callback, so it is not being executed synchronously. If you change your function to

$('#content').masonry('reload');

it might work they way you wanted, but I haven't tested this.