Webpack “outlayer”选项需要添加图像
因此,我似乎出于某种原因得到了这个错误: [InfiniteScroll]图像需要为outlayer选项添加 即使我已经声明imagesLoaded…以下是我的代码:Webpack “outlayer”选项需要添加图像,webpack,infinite-scroll,jquery-isotope,imagesloaded,Webpack,Infinite Scroll,Jquery Isotope,Imagesloaded,因此,我似乎出于某种原因得到了这个错误: [InfiniteScroll]图像需要为outlayer选项添加 即使我已经声明imagesLoaded…以下是我的代码: $('.item-list').imagesLoaded(function () { var $grid = $('.item-list'); $grid.isotope({ itemSelector: '.item-list__c
$('.item-list').imagesLoaded(function () {
var $grid = $('.item-list');
$grid.isotope({
itemSelector: '.item-list__card',
percentPosition: true,
masonry: {
columnWidth: '.grid-sizer'
}
});
var iso = $grid.data('isotope');
$grid.infiniteScroll({
path: '.navigation a',
append: '.item-list__card',
debug: true,
status: '.infinite-scroll-request',
outlayer: iso
}
);
});
我在页面顶部加载带有webpack和es6的插件:
import 'ImagesLoaded';
import Isotope from 'Isotope';
import InfiniteScroll from 'infinite-scroll';
不知道发生了什么不幸的是,希望有人能帮忙 好的,看来我没有阅读安装网页包的所有文档。。。我必须将无限卷轴分配给imagesloaded
InfiniteScroll.imagesLoaded = imagesLoaded;
因此,我的完整代码是:
InfiniteScroll.imagesLoaded = imagesLoaded;
$('.item-list').imagesLoaded( function () {
var $grid = $('.item-list');
$grid.isotope({
itemSelector: '.item-list__card',
layoutMode: 'masonry',
masonry: {
columnWidth: '.grid-sizer',
horizontalOrder: true,
gutter: '.gutter-sizer',
},
percentPosition: true,
});
var iso = $grid.data('isotope');
$grid.infiniteScroll({
path: '.navigation a',
append: '.item-list__card',
debug: true,
status: '.infinite-scroll-request',
outlayer: iso,
//safari work around
onInit: function () {
this.on('load', function () {
$grid.isotope('layout');
})
}
}
);
// filter items on button click
$('.filter').on('click', 'button', function () {
var filterValue = $(this).attr('data-filter');
$grid.isotope({filter: filterValue});
});
});
无限卷轴有一个可怕的教程,希望它有帮助