Please fix overlapping images on lazy load, I am using Lozad.js for lazy loading,

[Darpan-favfly]

please help me to fix this, I am using Lozad.js for lazy loading

[neel448]

Did you find a solution for this ? I am not using lazy loading still some of my images randomly overlaps while navigating between pages.

[kenjibailly]

I'm having the same issue, sometimes they just start overlapping.
When combining this with infinite scroll bugs completely.
Been trying to figure this out for quite some time now.

I "fixed" it by adding setInterval which reloads the msnry layout. Not really a good solution, but it's the only way I got it working at this moment.

setInterval(() => {
  msnry.layout()
}, 100);

Hopefully this gets fixed soon.

[suhailaleryani]

I have the same issue, I hop it get fixed.
As workaround I re-init masonry() after the new articles are appended to the grid.

$container.masonry("appended", $newElems);
$container.masonry();

[StuartClickReturn]

im not using lazy load either, but my grid images loads overlapped

Hi there

My grid keeps loading with half the picture on top of one another, and cannot understand why?
https://newtopia1.wpenginepowered.com/artwork/

when you resize the window the grid reconfigures perfectly, why can it not just load right the first time...

im confused where i have gone wrong
it looks like this --> https://newtopia1.wpenginepowered.com/wp-content/uploads/2024/03/Screenshot-2024-03-18-at-23.18.23.png or this --> https://newtopia1.wpenginepowered.com/wp-content/uploads/2024/03/Screenshot-2024-03-18-at-23.03.36.png

Did you find a solution for this ? I am not using lazy loading still some of my images randomly overlaps while navigating between pages.

[StuartClickReturn]

I'm having the same issue, sometimes they just start overlapping. When combining this with infinite scroll bugs completely. Been trying to figure this out for quite some time now.

I "fixed" it by adding setInterval which reloads the msnry layout. Not really a good solution, but it's the only way I got it working at this moment.

setInterval(() => {
  msnry.layout()
}, 100);

Hopefully this gets fixed soon.

hey there,

im just wonder about your "fix", where would i put that code?

where would i put this code

setInterval(() => {
  msnry.layout()
}, 100);

I tried to place it here, at the bottom

        // Initialize Masonry after the content has loaded
        jQuery(document).ready(function ($) {
            $('.masonry-grid').masonry({
columnWidth: '.grid-sizer',
                itemSelector: '.grid-item',
gutter: 5,
            percentPosition: true
            });
        });
setInterval(() => {
  msnry.layout()
}, 100);

(sorry if i sound stupid but if you do not know javascript that well, then quoting a section of code to novice is meaningless)

my grid is absolute mess and appears to be getting worse as i add more images

[razonyang]

A pure CSS workaround is to assign a fixed height for images, the drawbacks is that visitors may won't see the full picture. I've a image viewer on pages, so this seems doesn't matter to me.

My use case is mixed of images and texts: 1) image and text 2) text only 3) image only.

// change the class name as yours
.my-grid-img {
  height: 320px;
  object-fit: cover;
}

[piotr-dolega]

setInterval(() => {
msnry.layout()
}, 100);

Thank you. The only solution that worked for me. I am using Masonry, Fancybox, razor pages, and LazySizes combo