一组图像无法加载（Masonry，Infinitescroll，ImagesLoaded）

Question

我们在Safari浏览器中也存在此错误（在iPad和iPhone上也是如此）。基本上，当用户访问页面时，它会向他显示带有文章的图像，如果他向下滚动，它会加载新文章但图像丢失。< / p>

我注意到的是图像在这里，但它们的高度等于0 - 可能是与imagesLoaded插件相关的东西.Bellow是我们的CommonJS代码

define([
    'imagesloaded',
    'masonry-layout',
    'vendor/infinitescroll'
], function(imagesLoaded, Masonry, infinitescroll){

    $(document).ready(function() { 

        'use strict';

        // Main content container
        let gridSelector    = 'div.Grid',
                $container      = $(gridSelector),
                itemSelector    = '.StandardArticle';

        // Masonry + ImagesLoaded
        $container.imagesLoaded(function(){
            $container.layout = new Masonry(gridSelector, {
                itemSelector: itemSelector,
                percentPosition: true
            });
        });

        // Infinite Scroll
        $container.infinitescroll({
            navSelector: "#infinite_navigation",
            nextSelector: "#infinite_navigation a",
            itemSelector: itemSelector,
            dataType: 'html',
            path: [$('#infinite_navigation a').attr('href') + '?page=', ''],
            loadingImg: $('#infinite-loading-img').attr('src'),
            loading: {
              finishedMsg: 'All articles are loaded !'
            }
          },

            function( newElements ) {
                var $newElems = $( newElements ).css({opacity: 0});
                $newElems.imagesLoaded(function(){
                    $newElems.animate({opacity: 1});
                    $container.layout.appended( $newElems );
                 });
            }
        );

    });

});

我们的CSS中没有任何奇怪的东西 - 非常基本的结构。