Cannot get this to work with lozad (lazyloading script)

[ZCweb]

Has anyone had success with getting masonry grid to work with lozad.js. Images are lazyloaded but everything is collapsed when page loads.

Masonry probably thinks that all images are empty because images are loaded when user scrolls to the location of the gallery. If you start to move the window then everything loads fine because it makes the responsive adjustment recreating the columns.

Any help would be appreciated. I have been looking for someone to fix this on Upwork with no success.

Here it is lazyloaded notice it is collapsed. Make sure you scroll down to this. There was a quick fix by adding padding percentages calculated by aspect ratio. But that had mixed effects and did not look good when browser widow was resized. I'm sure other libraries that are not lazyload have a similar issue with this.

http://www.gagne.zorapayments.com/construction-projects/

Here it is without the lazyload working fine

http://www.gagne.zorapayments.com/construction-projects-no-lazy/

[ZoeFken]

Let me know if you find a solution. I am having a similar issue

[ZoeFken]

I managed to get something working. What you need are the sizes of the images and placeholders for those images. I was lucky enough that all my images where either size 500750 or 750500. I first placed in those images as the src and then lazyloaded the rest when the users scrolled.

Here is the js

var $container = $('.grid'); $container.imagesLoaded(function(){ $container.masonry({ itemSelector: '.grid-item', columnWidth: '.grid-sizer', percentPosition: true, gutter: 10 }); $('.grid-item img').addClass('not-loaded'); $('.grid-item img.not-loaded').lazyload({ effect: 'fadeIn', load: function() { // Disable trigger on this image $(this).removeClass("not-loaded"); $container.masonry('reload'); } }); $('.grid-item img.not-loaded').trigger('scroll'); });

[ZCweb]

My problem is that my images are differing depending on the user's upload size. The beauty of the plugin is it preserves the original aspect ratio. But when you get a lot of images then lazyloading is needed. And Lozad is a very popular way to lazyload. I asked them and they referred to this plugin. So hopefully we can get these 2 working together.