Images overlapping with lazy load

[AnonDev1312]

This works (without lazy load):
https://codepen.io/jo-libertaire/pen/zYPjWYw

But images are overlapping as soon as I enable lazy load:
https://codepen.io/jo-libertaire/pen/qBVYpKB

What am I doing wrong?

[ZoeFken]

When I was working on a it I found that using image placeholders in the lazy laod was the way to go.
The issue is that when the masorny is created all images are needed to form the correct layout. By using a set of placeholders you circumvent this issue. Or if you feel realy bold let the masonry know all the image sizes beforehand?

[AnonDev1312]

When I was working on a it I found that using image placeholders in the lazy laod was the way to go.
The problem is that all my images are different sizes so I can't use the same placeholder

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