如何在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

如果您的图片非常大＆＃34; （就像你说的那样），尝试预加载太多它们并不是一个好主意，因为这样会大大减慢一切。