Combining LazyLoad and Jquery Masonry

Question

I have been trying to piece together masonry and moo tools lazyload however they both dont seem to go very well together although it possibly could just be because I am slightly useless at coding!

The masonry works on this page.

However when I try to put it together with lazyload it seems to totally mess up. Does anyone have any idea how to implement both plugins together?

I have spent 6 days trying to figure it out and this is my final hope ha!

Thanks

Answer 1

softk5 answer wasn't working for me and causing freeze on the most of browser. Here is my following code and its working for me.

jQuery(document).ready(function(){
    jQuery("img.lazy").lazyload({
        effect: 'fadeIn',
        effectspeed: 1000,
        threshold: 200,
        load:function(){
            var $container = jQuery('.is_masonry');
            $container.masonry({
            }).imagesLoaded(function() {   $container.masonry();  });

        }
    });

});

Answer 2

I posted the same answer on other same issues article. If you have the problem images get overlapped, I found the solution at the site below, although it is in Japanese.

http://www.webdesignleaves.com/wp/jquery/1340/

Hope this will help.

The point is use following;

$('img.lazy').load(function(){ ... })

HTML

<div id="works_list">
<div class="work_item">
<img class="lazy" src="images/dummy.gif" data-original="images/works/thumb/001.jpg" alt="">
<p>title 1</p>  
</div><!-- end of .work_item-->
<div class="work_item">
<img class="lazy" src="images/dummy.gif" data-original="images/works/thumb/002.jpg" alt="">
<p>title 2</p>  
</div><!-- end of .work_item-->
 ....
</div><!-- end of #works_list -->    

jQuery

$("img.lazy").lazyload({
    effect: 'fadeIn',
    effectspeed: 1000,
    threshold: 200
});

$('img.lazy').load(function() {
    masonry_update();
});

function masonry_update() {     
    var $works_list = $('#works_list');
    $works_list.imagesLoaded(function(){
        $works_list.masonry({
            itemSelector: '.work_item',　
            isFitWidth: true,　
            columnWidth: 160
        });
    });
 }    

Answer 3

The reason is that Masonry needs to know the dimensions of the image in order to lay out the items properly. However LazyLoad delays loading the image until the image is in the viewport, meaning that the image will have no dimensions (or have the dimensions of the dummy/placeholder image you set as the img src).

Answer 4

may be someone will have problems too , hope help .

to make it work with wordpress photoswipe-masonry theme is impossible without plugin modification.

next is related to this modification and just with masonry

a) lazyload use data-original="xxx" attribute to set image url . NOT src . to you need place some placeholder . may be 1x1 pixel that will be loaded without lazyload .

b) this placeholder need cover ALL space for future lazyloaded image , OR masonry will make all images visible as lazyloading view . it's because before images loaded it have zero size 0px x 0px . and all images fit in visible area before loaded . Lazyload count all as visible and load all .

to arrange ALL space for future image you need set

style="width:xxpx;height:xxpx;"

just width="xx" and height="xx" is not enough

so image placeholder became as :

<img src="http:..1x1px" data-original="http://real_image" style="width:xxpx;height:xxpx;">

then apply lazy load normal way , and masonry . in any order .

Important - masonry update width to it's column size , BUT not height , so if your column size = 50px , then you need calculate heigh of placeholder

new_height = 50 / actual_width * actual_height;

so for wordpress theme need

$scaled_height =$options['thumbnail_width']/$full[1] * $full[2];

.....

                    <img src="http://xxxx/1x1px.jpg" data-original='. $thumb[0] .' itemprop="thumbnail" alt="'.$image_description.'" style="width:'.$full[1].'px;height:'.$scaled_height.'px;" width="'.$full[1].'" height="'.$full[2].'"/>

....

then add new lines below masonry init

        var reloading = false;
                    $.getScript('https://cdnjs.cloudflare.com/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.min.js',function(){



                              \$('.msnry_item img').lazyload({
                                  effect: 'fadeIn',
                                  //container: container,
                                  threshold : 200,
                                  skip_invisible : false,
                                  failure_limit : 5,
                                  load: function() {
                                      if( ! reloading )
                                      {
                                         reloading = true;
                                         setTimeout(function(){ 
                                              container.masonry('reload');
                                              reloading = false;
                                         }, 500);

                                     }
                                  }
                              });

                    });

Answer 5

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