我使用同位素插件和惰性大小来建立照片库。但是延迟加载无法正常工作,并且出现以下错误:“延迟加载不是函数”。
对这个问题有什么想法,以及如何一起实现这两个插件?
npm install lazysizes --save
npm install isotope-layout --save
这是我的代码:
import $ from 'jquery';
import Isotope from 'isotope-layout';
import jQueryBridget from 'jquery-bridget';
import imagesLoaded from 'imagesloaded';
import lazyload 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;