feat: lazy load

Author: iamdarkle

js/src/forum/index.ts

@@ -19,6 +19,7 @@ app.initializers.add('darkle/fancybox', () => {
             Dots: false,
             infinite: false,
             dragFree: false,
+            preload: 0,
           });
         });
 
@@ -51,6 +52,7 @@ app.initializers.add('darkle/fancybox', () => {
                 Fancybox.fromNodes(group, {
                   Carousel: {
                     infinite: false,
+                    preload: 0,
                   },
                   Toolbar: {
                     display: {

src/DefineGalleryTemplate.php

@@ -21,7 +21,7 @@ public function __invoke(Configurator $config)
                 <xsl:choose>
                     <xsl:when test="parent::FANCYBOX-GALLERY-ITEM">
                         <a data-fancybox="gallery" href="{@src}">
-                            <img src="{@src}" alt="{@alt}" loading="lazy"/>
+                            <img data-lazy-src="{@src}" alt="{@alt}" loading="lazy"/>
                         </a>
                     </xsl:when>
                     <xsl:otherwise>
@@ -39,7 +39,7 @@ public function __invoke(Configurator $config)
                 <xsl:choose>
                     <xsl:when test="parent::FANCYBOX-GALLERY-ITEM">
                         <a data-fancybox="gallery" href="{@url}">
-                            <img src="{@url}" alt="" loading="lazy"/>
+                            <img data-lazy-src="{@url}" alt="" loading="lazy"/>
                         </a>
                     </xsl:when>
                     <xsl:otherwise>