wp + masonry + imagesloaded lazyload = gap between posts

[AnonDev1312]

Hi,

I use a customized version of the Wordpress theme Baskerville, which uses jetpack masonry and imagesloaded lazyload.

But when it loads new posts after scrolling, there is a gap between the posts.
See it here: https://www.infolibertaire.net/
Screenshot: https://prnt.sc/l2vzru-dk5rY
Main javascript: https://infolibertaire.net/wp-content/themes/baskerville/js/global.js

If I open chrome developer console and manually type $blocks.masonry(); it fixes the issue... until I scroll down further and the layout breaks again

Any idea how I can fix this issue?

So far I found this workaround:

time=setInterval(function(){
   $blocks.masonry();
 },5000);

But it is not ideal as users can still see the glitch for a few seconds before the posts move

[Housik]

try this in file masonryInitializer.js:

(function ($) {

    "use strict";

    $(document).ready(function () {
        // init Masonry
        var $grid = $('.msnry-grid').masonry({
            itemSelector: '.msnry-grid-item',
            columnWidth: '.msnry-grid-sizer',
            percentPosition: true,
        });

        // layout Masonry after each image loads
        $grid.find('[loading="lazy"]').on('load', function() {
            $('.msnry-grid').masonry('layout');
        })
    });

})(jQuery);

[Nick Spreitzer]

@Housik Ahhhh, finally the answer I've been looking for. Thank you!