feat(#26): lazy load images from slot background

src/components/deck/deckdeckgo-deck/deckdeckgo-deck.tsx

@@ -47,8 +47,9 @@ export class DeckdeckgoDeck {
 
     const lazyLoadContentFirstSlide = this.lazyLoadContent(0);
     const lazyLoadContentSecondSlide = this.lazyLoadContent(1);
+    const lazyLoadImages = this.lazyBackgroungImages();
 
-    await Promise.all([lazyLoadContentFirstSlide, lazyLoadContentSecondSlide]);
+    await Promise.all([lazyLoadContentFirstSlide, lazyLoadContentSecondSlide, lazyLoadImages]);
   }
 
   private initWindowResize() {
@@ -403,6 +404,20 @@ export class DeckdeckgoDeck {
     });
   }
 
+  // Lazy load images from slot=background
+  private lazyBackgroungImages(): Promise<void> {
+    return new Promise<void>(async (resolve) => {
+      const allSlotedImages: NodeListOf<HTMLElement> = this.el.querySelectorAll('img[slot=\'background\']');
+      const allShadowImages: NodeListOf<HTMLElement> = this.el.querySelectorAll('[slot=\'background\'] img');
+
+      const images: HTMLElement[] = Array.from(allSlotedImages).concat(Array.from(allShadowImages));
+
+      await DeckdeckgoUtils.lazyLoadSelectedImages(images);
+
+      resolve();
+    });
+  }
+
   @Method()
   async slideTo(index: number, speed?: number | undefined, emitEvent: boolean = true) {
     if (index > this.length || index < 0) {

src/components/utils/deckdeckgo-utils.tsx

@@ -5,9 +5,22 @@ export class DeckdeckgoUtils {
   }
 
   static async lazyLoadImages(el: HTMLElement): Promise<void> {
-    return new Promise<void>((resolve) => {
+    return new Promise<void>(async (resolve) => {
       const images: HTMLElement[] = this.getAllImages(el);
 
+      await this.lazyLoadSelectedImages(images);
+
+      resolve();
+    });
+  };
+
+  static async lazyLoadSelectedImages(images: HTMLElement[]): Promise<void> {
+    return new Promise<void>((resolve) => {
+      if (!images) {
+        resolve();
+        return;
+      }
+
       images.forEach((image: HTMLElement) => {
         if (image.getAttribute('data-src')) {
           image.setAttribute('src', image.getAttribute('data-src'));

src/index.html

@@ -130,6 +130,8 @@ <h1 slot="title">Manual code</h1>
 }</code>
   </deckgo-slide-code>
 
+  <img slot="background" data-src="https://deckdeckgo.com/assets/img/deckdeckgo.png"  style="position: absolute; top: 0; left: 0;">
+
 </deckgo-deck>
 
 <script type="text/javascript">