Owl Carousel 2带有lazyload选项

时间：2022-11-04 08:34:35

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

我在一个项目中使用Owl Carousel 2并且它工作得很好。

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.

我想在每个项目中延迟加载图像。值得庆幸的是,Owl Carousel 2有一个内置选项。但是,没有选项可以预先在下一个或两个项目(尚未在视口中)中延迟加载图像。

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.

例如,在此演示中,可以看到四张幻灯片。但我希望幻灯片5和6中的图像能够先发制人。当您滚动旋转木马时,无论哪个幻灯片是下一个要显示但尚未可见的幻灯片,也应该在它们变得可见之前开始加载。

1 个解决方案

#1

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.

您可以尝试添加lazySizes。 lazySizes是第三方lazyloader,它可以自动检测视图附近的图像,因此可以在没有配置的情况下与许多滑块一起使用。

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

如果您想强制执行预加载,还可以添加类lazypreload。

Here are two examples:

这是两个例子:

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

请注意,您可能需要指定图像尺寸。

#1

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.

您可以尝试添加lazySizes。 lazySizes是第三方lazyloader,它可以自动检测视图附近的图像,因此可以在没有配置的情况下与许多滑块一起使用。

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

如果您想强制执行预加载,还可以添加类lazypreload。

Here are two examples:

这是两个例子:

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

请注意,您可能需要指定图像尺寸。

标签：

相关文章