Jetpack Infinite Scroll, Isotope and ImagesLoaded

Question

I'm trying to build grid with Infinite scroll and Isotope. I'm using also ImagesLoaded plugin for images which overlaps each other. The problem is I still get images overlap even that I triggered ImagesLoaded for Isotope init and before Isotope relayout. Here is my JavaScript code:

jQuery(document).ready(function($){
    //var $ = jQuery;
    // init Isotope
    var $grid = $('#grid');
    $grid.imagesLoaded().done( function() {
        $grid.isotope({
            itemSelector: '.element-item',
            percentPosition: true,
            layoutMode: 'masonry',
            masonry: {
                columnWidth: '.grid-element-sizer',
            }
        });
    });

    // bind filter button click
    $('.filters-button-group').on( 'click', 'button', function() {
        var filterValue = $( this ).attr('data-filter');
        $grid.isotope({ filter: filterValue });
    });

    // change is-checked class on buttons
    $('.button-group').each( function( i, buttonGroup ) {
        var $buttonGroup = $( buttonGroup );
        $buttonGroup.on( 'click', 'button', function() {
        $buttonGroup.find('.is-checked').removeClass('is-checked');
        $( this ).addClass('is-checked');
        });
    });
});

jQuery(document).ready(function($){
    infinite_count = 0;
    // Triggers re-layout on infinite scroll
    $( document.body ).on( 'post-load', function () {
        infinite_count = infinite_count + 1;
        var $container = $('#grid');
        var $selector = $('#infinite-view-' + infinite_count);
        var $elements = $selector.find('.hentry');
        $elements.hide();

        $container.imagesLoaded().done( function(){
            $container.append( $elements ).isotope( 'appended', $elements );
            $elements.fadeIn();
            //$container.isotope('reloadItems')
        });


    });
});

Where can be my mistake on this? After I trigger Isotope filtering or resize browser window, everything is fixed.

Answer 1

The problem was that I call imagesLoaded on the Isotope grid itself, instead of the newly added items. I changed only the event that triggers when new items were added to wait until the images of the newly added posts are loaded, then append them to the isotope layout.

infinite_count = 0;
    // Triggers re-layout on infinite scroll
    $( document.body ).on( 'post-load', function () {
        var $container = $('#grid');

        infinite_count = infinite_count + 1;

        var $selector = $('#infinite-view-' + infinite_count);
        var $elements = $selector.find('.hentry');
        $elements.hide();

        $elements.imagesLoaded().done( function(){
            $container.append( $elements ).isotope( 'appended', $elements );
            $elements.fadeIn();
        });
    });