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

Question

我刚开始在我的 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 不能开箱即用。但也许您有类似的问题，或者可以提供一些关于以最有效的方式执行此操作的提示？

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

Answer 1

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

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

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

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