Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
Darpan-favfly opened this issue May 19, 2023 · 6 comments

Comments

@Darpan-favfly
Copy link

image

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

@neel448
Copy link

neel448 commented Jul 6, 2023

Did you find a solution for this ? I am not using lazy loading still some of my images randomly overlaps while navigating between pages.
Screenshot 2023-07-06 at 3 06 49 PM

@kenjibailly
Copy link

kenjibailly commented Nov 12, 2023

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
Copy link

suhailaleryani commented Dec 7, 2023

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
Copy link

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. Screenshot 2023-07-06 at 3 06 49 PM

@StuartClickReturn
Copy link

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
Copy link

razonyang commented Jun 21, 2024

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;
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

6 participants