Open Darpan-favfly opened 1 year ago
Did you find a solution for this ? I am not using lazy loading still some of my images randomly overlaps while navigating between pages.
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.
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();
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.
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
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;
}
please help me to fix this, I am using Lozad.js for lazy loading