NO BUG: When I use masonry in a loop of images (ACF Gallery) with loading="lazy" they get rendered as "eager"

Browser: Firefox, Chrome
OS: Windows / Linux
URL: Stavros Niflis project in Mykonos - Stavros Niflis Photography

When I use masonry in a container where there is a loop of images (ACF Gallery) with loading=“lazy” they get rendered as “eager”, which makes the page loading slow when the number of images is big. I could use another plugin to handle the lazy loading probably, but I would rather make it work natively. Another issue I face is that when I only loop through 6 images and let the rest load as infinite scroll, then the lightbox only shows the images already loaded and not all of them, which is not what I want. I mean I don’t want the user to click one of the first 6 images to go to lightbox mode and not be able to navigate to the rest images while being in lightbox.
I might have messed up something, but hopefully you can help make sense of all this.
Thank you in advance for your efforts.

Hi Athanasios,
Thanks so much for your report!

Unfortunately, I cannot reproduce the issue. Did you explicitly set the loading to lazy?

Best regards,
timmse

Thank you for your time.

I am uploading screenshots of the current setup:

Image:

Container layout:

Loop:

Last image (way below viewport) rendering as eager in the frontend:

Would you need something else?

You are using an optimization plugin that converts your images to avif, right? Please deactivate the plugin and see what happens.

I am converting them to avif localy with magick before uploading them to wordpress.

My plugin stack has the following activated:

  • WPASE Pro
  • Advanced Themer
  • ACSS
  • Frames
  • BricksExtras
  • HappyFiles Pro
  • The SEO Framework

Litespeed Cache is deactivated right now.

I still can’t replicate the issue. Please send temporary login credentials and a link to this thread to help@bricksbuilder.io using the email address you used during the purchase.

Thanks for the login credentials!

Once I disabled this in ASE pro » Disable smaller components, it works just fine :slight_smile:

I’ll mark this as NO BUG. Have a great weekend!

1 Like

That’s very important to know. So Bricks uses the same lazy loading as Wordpress or does ASE Pro disable both Bricks and Wordpress lazy loading?

We use the native WordPress features whenever possible since it doesn’t make sense to reinvent the wheel as long as it works :slight_smile:

1 Like