webpack - 外层选项所需的 ImagesLoaded

Question

所以我似乎出于某种原因得到了这个错误： [InfiniteScroll] imagesLoaded required for outlayer option

即使我已经声明了 imagesLoaded ......这是我的代码：

        $('.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';

不知道发生了什么不幸，希望有人能提供帮助！

Answer 1

好的，看起来我没有阅读 Webpack 安装的所有文档......我必须为加载的图像分配无限滚动。

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});
            });
        });

Answer 2

Infinite Scroll 在这里有一个很棒的教程希望它有帮助！