Combining LazyLoad and Jquery Masonry-open source projects desandro/masonry

Recently, I gotta solve this for one of my website. I have tried a couple of ways and it seems working.

1. First Method:

• Load masonry on the items
• Put a place holder on all images and use lazyload on them
• Now, when each image fire lazyload.load callback, reload masonry -> a series of masonry(‘reload’) [Updated jsfiddle with new images, easier to illustrate the point]

http://jsfiddle.net/7vEJM/8/

var $container = $('#container');
$container.imagesLoaded(function(){
    $container.masonry({
        itemSelector: '.item',
        columnWidth: function(containerWidth){
            return containerWidth / 12;
        }
    });
    $('.item img').addClass('not-loaded');
    $('.item img.not-loaded').lazyload({
        effect: 'fadeIn',
        load: function() {
            // Disable trigger on this image
            $(this).removeClass("not-loaded");
            $container.masonry('reload');
        }
    });
    $('.item img.not-loaded').trigger('scroll');
});

This method is good, but it has one disadvantage. The grid layout might not be kept the same since the time of masonry.reload() depends on each image’s load time (i.e. the one supposed to be loaded first might only finish later)

2. Second Method: Look at sites like pinterest, i think, it does not follow the first method, because they have the container boxes arranged even before any image loaded, therefore, what I tried to achieve is to display just the boxes with same ratio as the images. The steps are:

• Pass your images dimension (just return a json like {image1: [300,400],image2: [400,500]} )
• Use CSS trick to make div box resize according to container. I found that trick here
• Lazy load like normal, no need to trigger any reload since now, without the image, the boxes are alr arranged correctly

http://jsfiddle.net/nathando/s3KPn/4/

var $container = $('#container');
$container.imagesLoaded(function(){
    $container.masonry({
        itemSelector: '.item',
        columnWidth: function(containerWidth){
            return containerWidth / 12;
        }
    });
    $('.item img').lazyload({
        effect: 'fadeIn'
    });
    $('.item img').trigger('scroll');
});

[Edited to add the jsfiddle for the second method]

Notice:

• In this fiddle, I manually put in the height/width ratio of each image in ‘padding-bottom: xxx%’ which should be passed in from your server code (refer to step 1)
• Added in a border to make boxes visible
• To illustrate that the boxes will be arranged even when the images not loaded, try uncomment /*display: none */ and comment display: block for #container.fluid .item img

Cheers