Open AnonDev1312 opened 2 years ago
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?
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
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);
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?