From 78e2f5698ed1bfd83df90f52a91f8251483379f5 Mon Sep 17 00:00:00 2001
From: daviddalbusco <david.dalbusco@outlook.com>
Date: Sun, 9 Dec 2018 10:18:34 +0100
Subject: [PATCH] feat(#26): lazy load images from slot background

---
 .../deck/deckdeckgo-deck/deckdeckgo-deck.tsx    | 17 ++++++++++++++++-
 src/components/utils/deckdeckgo-utils.tsx       | 15 ++++++++++++++-
 src/index.html                                  |  2 ++
 3 files changed, 32 insertions(+), 2 deletions(-)

diff --git a/src/components/deck/deckdeckgo-deck/deckdeckgo-deck.tsx b/src/components/deck/deckdeckgo-deck/deckdeckgo-deck.tsx
index cacff002a..316784d17 100644
--- a/src/components/deck/deckdeckgo-deck/deckdeckgo-deck.tsx
+++ b/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) {
diff --git a/src/components/utils/deckdeckgo-utils.tsx b/src/components/utils/deckdeckgo-utils.tsx
index ec5e7df86..345842f8c 100644
--- a/src/components/utils/deckdeckgo-utils.tsx
+++ b/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'));
diff --git a/src/index.html b/src/index.html
index ed40736cb..da3924939 100644
--- a/src/index.html
+++ b/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">