jquery - 如何在 Fancybox 3 中预加载下一张图片？

我刚开始在我的 Ruby on Rails 项目中使用 Fancybox 3.3.5。

根据文档，我以下列方式使用它：

<a href="image.jpg" data-fancybox data-caption="Caption for single image">
    <img src="thumbnail.jpg" alt="" />
</a>

问题：如果原始图像非常大，加载时间（可见微调器）可能需要几秒钟。我想减轻这种情况。

我的想法：我想实现这一目标的最佳方法是在用户查看其中一张时从图库中预加载（几张）以下图像。

问题：有没有办法在 Fancybox 3 中预加载下一张图片？我知道 Fancybox 并不是开箱即用的。但也许您有类似的问题，或者可以提供一些关于以最有效的方式执行此操作的提示？

我知道preloadFancybox config 提供的选项。然而，它所做的基本上是将微调器替换为图像的拇指版本，同时在后台加载原始图像。这不是我想要的，主要是因为我的拇指太小，无法全屏显示；它只是看起来不够好。

标签： jqueryruby-on-railsfancyboxfancybox-3

fancybox 会自动加载当前和上一个/下一个图像。

您可以添加data-width和data-height属性以在真实图像仍在加载并缓慢出现在占位符上时显示缩略图，有关更多信息，请参阅https://fancyapps.com/fancybox/3/docs/#images。

您可以使用data-thumb属性来设置替代缩略图图像，请参见此处的示例 - https://codepen.io/fancyapps/pen/VyLOJX?editors=1000

如果您的图像“非常大”（如您所说），则尝试预加载太多图像不是一个好主意，因为这会大大减慢一切。