From 1610ba4a4b37f0340b09c02aebca96972573955a Mon Sep 17 00:00:00 2001
From: Anthony Ledesma <30462574+AnthonyLedesma@users.noreply.github.com>
Date: Tue, 27 Feb 2024 13:16:36 -0700
Subject: [PATCH] Enable Lightbox compatibility with Lazy Loading (#2588)

* make lightbox compatible with a3 lazy load plugin

* allow lazy loading with Lightbox

---------

Co-authored-by: aledesma-godaddy <aledesma@godaddy.com>
---
 src/js/coblocks-lightbox.js | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/src/js/coblocks-lightbox.js b/src/js/coblocks-lightbox.js
index 06501fe4f15..505bf98b254 100644
--- a/src/js/coblocks-lightbox.js
+++ b/src/js/coblocks-lightbox.js
@@ -140,7 +140,20 @@
 					imagePreloader.preloaded = true;
 					Array.from( images ).forEach( function( img, imgIndex ) {
 						imagePreloader[ `img-${ imgIndex }` ] = new window.Image();
-						imagePreloader[ `img-${ imgIndex }` ].src = img.attributes.src.value;
+
+						// If the src is lazy loaded, use the data-src attribute.
+						// Compatibility with A3 Lazy Load plugin and maybe others.
+						if (
+							img.attributes.src.value?.includes( 'lazy-load' ) &&
+							'undefined' !== typeof img.attributes?.[ 'data-src' ]?.value
+						) {
+							imagePreloader[ `img-${ imgIndex }` ].src =
+								img.attributes[ 'data-src' ].value;
+						} else {
+							imagePreloader[ `img-${ imgIndex }` ].src =
+								img.attributes.src.value;
+						}
+
 						imagePreloader[ `img-${ imgIndex }` ][ 'data-caption' ] =
 								( images[ imgIndex ] && images[ imgIndex ].nextElementSibling )
 									? getImageCaption( images[ imgIndex ] ) : '';