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 <[email protected]>
godaddy-wordpress · Feb 27, 2024 · 1610ba4 · 1610ba4
1 parent 0a2cecc
commit 1610ba4
Showing 1 changed file with 14 additions and 1 deletion.
diff --git 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 ] ) : '';