javascript - 带有延迟加载选项的 Owl Carousel 2

Question

我正在使用 Owl Carousel 2在一个项目中并且运行良好。

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

有没有其他人遇到过这个问题或者有什么解决方案可以提供？

例如，在 this demo 中，有四张幻灯片可供查看。但我希望先发制人地加载幻灯片 5 和 6 中的图像。当您滚动浏览轮播时，接下来要显示但尚未显示的幻灯片也应该在它们变得可见之前开始加载。

Answer 1

可以尝试添加lazySizes . lazySizes 是第三方延迟加载器，它会自动检测附近的 View 图像，因此无需配置即可与许多 slider 一起使用。

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

这里有两个例子:

• lazySizes with flexslider
• lazySizes with Flickity

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