猫头鹰Carousel 2带有lazyload选项

时间:2015-05-03 19:03:50

标签: javascript jquery lazy-loading owl-carousel

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

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

有没有人遇到过这个问题,还是有任何解决方案可以提供?

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

1 个答案:

答案 0 :(得分:3)

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

如果您想强制预加载,您还可以添加class lazypreload

以下是两个例子:

请注意,您可能需要specify the image dimensions