how to import lazy load and isotope using ES6 module?

1.2k views Asked by At

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;
0

There are 0 answers