如何使用ES6模块导入惰性载荷和同位素?

时间:2019-06-17 05:58:36

标签: javascript lazy-loading es6-modules isotope jquery-lazyload

我正在使用同位素布局构建图像库。我尝试使用延迟加载来防止下载所有照片(数百张照片)(我希望用户除非向下滚动,否则不要加载图像)。 我将lazy-sizes导入模块,但是出现以下错误:“ lazy-load不是函数”。

对这个问题有什么建议吗?

先谢谢您:)

这是我的代码:

    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 个答案:

没有答案