How can I implement lazy-loading for Owl Carousel slider images?

[cherylfoh]

Hello all,

A while back, I hired someone to implement lazy-loading for my site images. I was told to use class="gflazyload" and change the image source from "src=" to "data-src=" if I wanted to lazy-load anything added later.

Since then, I have set up some Owl Carousel sliders on my homepage. When I check my site report at https://analyze.speedboostr.com/, it shows those slider images to be contributing to homepage load time and it suggests to use lazy-loading on them. I understand I can use class="owl-lazy" to lazy-load the images as well and I have set the "lazyload:true" option in the javascript for the sliders.

When I look at the liquid files for the sliders though, I don't see any "img src" references, so I can't figure out how to lazy-load the slider images.

Where is the image source information for the sliders so I can change it to "data-src" and add either class="gflazyload" or class="owl-lazy" to test it?

packturtle.com

Thank you!

Cheryl

[cherylfoh · Accepted solution]

I found out the lazyloading actually wasn't working at all. The lazy loading script that was being used at the time had since been removed when I uninstalled a certain app. I set up lazyloading from scratch using Lazysizes and everything worked out after setting some customizations and fade-in options.

https://github.com/aFarkas/lazysizes