fancybox-不加载隐藏的图像

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>元素之外。

另外两条评论 ：

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

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