花式框 - 不加载隐藏的图像

fancybox - not to load hidden images

本文关键字：隐藏 图像 加载      更新时间：2023-09-26

在我的网站上，我有多个画廊正在用FancyBox打开。结构是：显示图库中的一张照片，当您单击它时，Fancybox将打开，您可以在Fancybox模式中浏览该图库中的照片。

代码为：显示主照片

<li><a id="some_id" class="grouped_elements" rel="some_rel" href="some_href"><img src=""></a></li>

然后是具有相同属性"rel"的照片，这些照片"属于"该图库：

<li><a id="some_id" style="display:none;" class="grouped_elements" rel="some_rel" href="some_href"><img src=""></a></li>

在属于该图库的照片上，我输入"display：none;"，因此它们不会显示在页面上，而仅在您通过单击主照片打开fancybox时显示。

这有效，但问题是我有很多照片并且页面加载时间真的很长，那么有没有办法防止加载带有"display：none"的照片，以便在打开某些图库后加载它？

编辑：忘了提，我正在使用花式盒子2.1.5

我建议使用 AJAX 调用来获取用户请求的图库/图像。这将是异步的，不会影响页面加载。收到成功的完整响应后，您可以使用响应数据启动 $（）.fancybox（）

您的解决方案可以简单得多：

将所有

锚点包装在隐藏的div中，而不是单独隐藏它们，并从所有隐藏的锚点中删除<img>标签，这样您就不会加载任何（大）图像，无论是否可见：

主要照片显示：

<li><a id="some_id" class="grouped_elements" rel="some_rel" href="some_href"><img src=""></a></li>

隐藏的照片

<div style="display:none">
    <a id="some_id" class="grouped_elements" rel="some_rel" href="some_href"></a>
    <a id="some_id" class="grouped_elements" rel="some_rel" href="some_href"></a>
    ... etc.
</div>

请注意，您甚至不需要将它们包装在 <li> 标签中，并且div可以放置在文档中的任何位置和 <ul> 元素之外。

另外两点意见：

  1. 确保不要在多个元素中重复相同的 ID。ID 在同一文档中应该是唯一的。如果要使用同一文档中的同一选择器操作多个元素，请改用类。

  2. 确保对缩略图使用调整大小的图像（<img>标签）;通过 CSS 或 html 将大图像调整为看起来像缩略图一样小（通常）不是一个好主意。

相关文章：