延迟加载 swiper.js 预加载下一张图像？

Question

当延迟加载处于活动状态时，有没有办法使用 swiper.js 预加载下一个或两个下一个图像？

\n

滑块包含 100 个图像，出于显而易见的原因，我们不想在页面打开时加载这些图像，但我们希望加载第一个图像和接下来的两个图像，以便在动画运行时将它们显示在下一张幻灯片中。

\n

有任何想法吗？

\n

Answer 1

我正在寻找同样的东西，并查看 swiperJS 文档，我偶然发现了lazyloading的API设置。

看起来也许loadPrevNext可以loadPrevNextAmount帮助我们。

loadPrevNext（布尔值，默认值：false）

• 设置为 true 以启用最近幻灯片图像的延迟加载（对于上一张和下一张幻灯片图像）

（我认为它们实际上意味着预加载下一张和上一张图像，如果我检查其他示例和演示）

loadPrevNextAmount（数量，默认：1）

• 预加载惰性图像的下一张/上一张幻灯片的数量。不能少于slidesPerView

所以：

const swiper = new Swiper('.swiper-container', {
  lazy: {
    loadPrevNext: true, // pre-loads the next image to avoid showing a loading placeholder if possible
    loadPrevNextAmount: 2 //or, if you wish, preload the next 2 images
  },
});