javascript - 使用灯箱图像作为隐藏链接的延迟图像加载

Question

我的网站有很多图片，所以为了压缩带宽使用，我想结合 Lightbox 实现（或一种形式的）延迟图片加载。关于 Lightbox，我使用默认插件 lightbox-plus-jquery.min.js 和 lightbox.min.css。

现在，我想在 Lightbox 中实现延迟图像（lazysizes.min.js 插件）。但是，由于我使用 Lightbox 的方式，我在此处找到的示例和解释不起作用。

为了解释总结，我的代码首先加载了一个小image_A。单击它时，它会打开带有大 image_AA 的 Lightbox。在此 Lightbox 弹出窗口中，可以导航到隐藏在初始页面上的 image_B、image_C 等。但是，我通过 HTML 链接加载这些图像，以使用“rel”属性将它们链接到特定的灯箱序列。

如何以这种编码方式实现延迟加载程序（或其他插件），以便 image_AA、image_B、image_C 仅在可见时加载？

我的代码：

<a href="../img/folder-A/image_AA.jpg" rel="lightbox[lb_A]" data-title="© Test 2021">
<img src="../img/folder-A/image_A.jpg">
<h2>Title</h2>
</a>
<a  class="image_hidden" href="../img/folder-A/image_B.jpg" rel="lightbox[lb_A]" data-title="© Test 2021"></a>
<a  class="image_hidden" href="../img/folder-A/image_C.jpg" rel="lightbox[lb_A]" data-title="© Test 2021"></a>
<a  class="image_hidden" href="../img/folder-A/image_D.jpg" rel="lightbox[lb_A]" data-title="© Test 2021"></a>
<a  class="image_hidden" href="../img/folder-A/image_E.jpg" rel="lightbox[lb_A]" data-title="© Test 2021"></a>

<a href="../img/folder-B/image_XX.jpg" rel="lightbox[lb_B]" data-title="© Test 2021">
<img src="../img/folder-B/image_X.jpg">
<h2>Title_X</h2>
</a>
<a  class="image_hidden" href="../img/folder-B/image_Y.jpg" rel="lightbox[lb_B]" data-title="© Test 2021"></a>
<a  class="image_hidden" href="../img/folder-B/image_Z.jpg" rel="lightbox[lb_B]" data-title="© Test 2021"></a>

标签： javascripthtmljquerylazy-loadinglightbox