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 slig

Answer 1

maybe 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 needs to cover ALL space for future lazyloaded image, OR masonry will make all images visible as lazyloading view. it's because before images loaded it has zero size 0px x 0px . and all images fit in the visible area before loading. Lazyload count all as visible and load all.

to arrange ALL space for the future image you need a set

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

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

so image placeholder became as :

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

Important - masonry update width to its column size, BUT not height, so if your column size = 50px, then you need to 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];

.....

....

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);
         }
      }
  });
});