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 e 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 bee visible.

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 e 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 bee visible.

• javascript
• jquery
• lazy-loading
• owl-carousel

Share Follow asked May 3, 2015 at 19:03 VinVin 2,16555 gold badges2929 silver badges3535 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

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:

• lazySizes with flexslider
• lazySizes with Flickity

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