I'm building an image gallery using isotope-layout. I try to use lazy-load to prevent downloading all photos (hundreds of photo) (I want users do not load images unless they scroll down). I import lazy-sizes to the module but i get this error: "lazy-load is not a function".
Is there any suggestion for this problem?
thank you in advance:)
here is my code:
import $ from 'jquery';
import Isotope from 'isotope-layout';
import jQueryBridget from 'jquery-bridget';
import imagesLoaded from 'imagesloaded';
import lazySizes from 'lazysizes';
jQueryBridget( 'isotope', Isotope, $ );
jQueryBridget( 'imagesLoaded', imagesLoaded, $ );
class isotopeGallrey {
constructor() {
this.Grid = $(".grid");
this.itemImage = $(".grid-item img");
this.createIsotope();
}
createIsotope() {
var that = this;
this.Grid.imagesLoaded(function() {
that.Grid.isotope({
columnWidth: '.grid-sizer',
itemSelector: '.grid-item',
containerClass: 'isotope',
layoutMode: 'masonry',
percentPosition: true
});
that.itemImage.lazyload({
effect: 'fadeIn'
});
that.itemImage.trigger('scroll');
});
}
}
export default isotopeGallrey;