Question

在我的网站上，我有多个用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”的照片，以便在打开一些图库后加载？

编辑：忘了提，我正在使用fancybox 2.1.5

Answer 1

我建议使用AJAX调用来获取用户请求的图库/图像。这将是异步的，不会影响页面加载。一旦收到成功的响应，您就可以使用响应数据初始化$（）。fancybox（）

Answer 2

您的解决方案可以更加简单：

将所有锚点包裹在隐藏的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>之外元件。

另外两条评论：

确保您没有在多个元素中重复相同的ID。 ID在同一文档中应该是唯一的。如果要在同一文档中使用相同的选择器操作多个元素，请改用 classes 。
确保为缩略图使用已调整大小的图片（<img>标记）;通过css或html重新调整大图像看起来像缩略图一样小（通常）不是一个好主意。

fancybox - 不加载隐藏的图像

2 个答案: