CODEWITHSUNDEEP
javascriptjquerylazy-loadingowl-carousel
Vin
Vin

Reputation: 2165

Owl Carousel 2 with lazyload option

I'm using Owl Carousel 2 in a project and it's working great.

I want to lazyload the images in each item. Thankfully, Owl Carousel 2 has a built in option for that. However, there is no option to lazyload the images in the next one or two items (which are not yet in the viewport) preemptively.

Has anyone elso come across this issue or are there any solutions to be offered?

For example, in this demo, four slides are in view. But I would like images in slide 5 and 6 to be loaded pre-emptively. And when you scroll through the carousel, whichever slides are the next two to be shown but not yet visible should also start loading before they become visible.

Upvotes: 1

Views: 11135

Answers (1)

alexander farkas
alexander farkas

Reputation: 14144

You can try to add lazySizes. lazySizes is a third party lazyloader, which detects near the view images automatically and therefore can be used with many sliders without configuration.

In case you want to force a preload you can also add a the class lazypreload.

Here are two examples:

Be aware, that you likely need to specify the image dimensions.

Upvotes: 3

Related Questions