0

在我的网站上,我有多个正在使用 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时才会显示。

这行得通,但问题是我有很多照片,而且页面加载时间很长,所以有没有办法阻止加载“显示:无”的照片,以便在打开一些画廊后加载?

编辑:忘了提,我使用的是fancybox 2.1.5

4

2 回答 2

0

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

将所有锚点包裹在隐藏中,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 重新调整大图像的大小以使其看起来像缩略图一样小(通常)不是一个好主意。

于 2013-11-08T21:47:56.037 回答
0

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

于 2013-11-08T11:58:56.497 回答