Mi sitio web tiene muchas imágenes, por lo que para comprimir el uso de ancho de banda, quiero implementar (o una forma de) carga diferida de imágenes en combinación con Lightbox. Con respecto a Lightbox, uso el complemento predeterminado lightbox-plus-jquery.min.js y lightbox.min.css.

Ahora, quiero implementar imágenes perezosas (complemento lazysizes.min.js) en Lightbox. Sin embargo, los ejemplos y explicaciones que encontré aquí no funcionan debido a la forma en que uso Lightbox.

Para explicar resumido, mi código primero carga una pequeña imagen_A. Cuando se hace clic en él, se abre Lightbox con una imagen grande_AA. Dentro de esta ventana emergente de Lightbox, uno puede navegar a image_B, image_C, etc., que están ocultos en la página inicial. Sin embargo, cargo estas imágenes a través de un enlace HTML, para usar el atributo 'rel' para vincularlas a una secuencia específica de Lightbox.

¿Cómo puedo implementar Lazy loader (u otro complemento) de esta forma de codificación, de modo que image_AA, image_B, image_C solo se carguen cuando estén visibles?

Mi código:

 <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>