fix(#10): hide lazy images on load

Author: peterpeterparker

src/components/slides/deckdeckgo-slide-author/deckdeckgo-slide-author.tsx

@@ -16,6 +16,8 @@ export class DeckdeckgoSlideAuthor implements DeckdeckgoSlide {
   @Prop() imgUrl: string;
 
   async componentDidLoad() {
+    await DeckDeckGoSlideUtils.hideLazyLoadImages(this.el);
+
     this.slideDidLoad.emit();
   }
 

src/components/slides/deckdeckgo-slide-code/deckdeckgo-slide-code.tsx

@@ -37,6 +37,8 @@ export class DeckdeckgoSlideCode implements DeckdeckgoSlide {
   private action: DeckdeckgoSlideCodeAction = null;
 
   async componentDidLoad() {
+    await DeckDeckGoSlideUtils.hideLazyLoadImages(this.el);
+
     this.slideDidLoad.emit();
 
     await this.loadLanguage();

src/components/slides/deckdeckgo-slide-content/deckdeckgo-slide-content.tsx

@@ -17,10 +17,12 @@ export class DeckdeckgoSlideContent implements DeckdeckgoSlide {
   @Prop() revealShowFirst: boolean = false;
 
   async componentDidLoad() {
+    await DeckDeckGoSlideUtils.hideLazyLoadImages(this.el);
+
     this.slideDidLoad.emit();
 
     if (this.reveal) {
-      await DeckDeckGoSlideUtils.hideElements(this.el, this.revealShowFirst);
+      await DeckDeckGoSlideUtils.hideRevealElements(this.el, this.revealShowFirst);
     }
   }
 

src/components/slides/deckdeckgo-slide-split/deckdeckgo-slide-split.tsx

@@ -17,10 +17,12 @@ export class DeckdeckgoSlideSplit implements DeckdeckgoSlide {
   @Prop() revealShowFirst: boolean = false;
 
   async componentDidLoad() {
+    await DeckDeckGoSlideUtils.hideLazyLoadImages(this.el);
+
     this.slideDidLoad.emit();
 
     if (this.reveal) {
-      await DeckDeckGoSlideUtils.hideElements(this.el, this.revealShowFirst);
+      await DeckDeckGoSlideUtils.hideRevealElements(this.el, this.revealShowFirst);
     }
   }
 

src/components/slides/deckdeckgo-slide-title/deckdeckgo-slide-title.tsx

@@ -17,10 +17,12 @@ export class DeckdeckgoSlideTitle implements DeckdeckgoSlide {
   @Prop() revealShowFirst: boolean = false;
 
   async componentDidLoad() {
+    await DeckDeckGoSlideUtils.hideLazyLoadImages(this.el);
+
     this.slideDidLoad.emit();
 
     if (this.reveal) {
-      await DeckDeckGoSlideUtils.hideElements(this.el, this.revealShowFirst);
+      await DeckDeckGoSlideUtils.hideRevealElements(this.el, this.revealShowFirst);
     }
   }
 

src/components/slides/deckdeckgo-slide.tsx

@@ -6,15 +6,15 @@ export interface DeckdeckgoSlide {
 
 export class DeckDeckGoSlideUtils {
 
-  static hideElements(el: HTMLElement, revealShowFirst: boolean): Promise<void> {
+  static hideRevealElements(el: HTMLElement, revealShowFirst: boolean): Promise<void> {
     return new Promise<void>((resolve) => {
       // No keyboard on mobile device to reveal elements
       if (this.isMobile()) {
         resolve();
         return;
       }
 
-      const elements: NodeListOf<HTMLElement> = el.querySelectorAll(revealShowFirst ? '[slot] > li:not(:first-child), [slot] > p:not(:first-child), [slot] > span:not(:first-child) [slot] > img:not(:first-child)' : '[slot] > li, [slot] > p, [slot] > span, [slot] > img');
+      const elements: NodeListOf<HTMLElement> = el.querySelectorAll(revealShowFirst ? '[slot] > li:not(:first-child), [slot] > p:not(:first-child), [slot] > span:not(:first-child), [slot] > img:not(:first-child)' : '[slot] > li, [slot] > p, [slot] > span, [slot] > img, img');
 
       if (!elements) {
         resolve();
@@ -26,7 +26,7 @@ export class DeckDeckGoSlideUtils {
     });
   }
 
-  private static showElement(el: HTMLElement): Promise<boolean> {
+  private static showRevealElement(el: HTMLElement): Promise<boolean> {
     return new Promise<boolean>((resolve) => {
       const elements: NodeListOf<HTMLElement> = el.querySelectorAll('[slot] > li, [slot] > p, [slot] > span, [slot] > img');
 
@@ -47,7 +47,7 @@ export class DeckDeckGoSlideUtils {
     });
   }
 
-  private static hideElement(el: HTMLElement): Promise<boolean> {
+  private static hideRevealElement(el: HTMLElement): Promise<boolean> {
     return new Promise<boolean>((resolve) => {
       const elements: NodeListOf<HTMLElement> = el.querySelectorAll('[slot] > li, [slot] > p, [slot] > span, [slot] > img');
 
@@ -72,25 +72,42 @@ export class DeckDeckGoSlideUtils {
   static beforeSwipe(el: HTMLElement, swipeLeft: boolean, reveal: boolean): Promise<boolean> {
     return new Promise<boolean>(async (resolve) => {
       if (reveal) {
-        const couldSwipe: boolean = swipeLeft ? await this.showElement(el) : await this.hideElement(el);
+        const couldSwipe: boolean = swipeLeft ? await this.showRevealElement(el) : await this.hideRevealElement(el);
         resolve(couldSwipe);
       } else {
         resolve(true);
       }
     });
   }
 
-  static async lazyLoadImages(el: HTMLElement): Promise<void> {
+  static hideLazyLoadImages(el: HTMLElement): Promise<void> {
     return new Promise<void>((resolve) => {
-      const allSlotedImages: NodeListOf<HTMLElement> = el.querySelectorAll('[slot] > img');
-      const allShadowImages: NodeListOf<HTMLElement> = el.shadowRoot.querySelectorAll('img');
+      let images: HTMLElement[] = this.getAllImages(el);
 
-      const images: HTMLElement[] = Array.from(allSlotedImages).concat(Array.from(allShadowImages));
+      if (!images) {
+        resolve();
+      } else {
+        images = images.filter((image: HTMLElement) => image.getAttribute('data-src'));
+
+        images.forEach((image: HTMLElement) => {
+          image.style.setProperty('visibility', 'hidden');
+        });
+
+        resolve();
+      }
+    });
+  }
+
+  static async lazyLoadImages(el: HTMLElement): Promise<void> {
+    return new Promise<void>((resolve) => {
+      const images: HTMLElement[] = this.getAllImages(el);
 
       images.forEach((image: HTMLElement) => {
         if (image.getAttribute('data-src')) {
           image.setAttribute('src', image.getAttribute('data-src'));
           image.removeAttribute('data-src');
+
+          image.style.setProperty('visibility', 'initial');
         }
 
         // Furthermore to lazy loading, we set pointer-events to none. Doing so we prevent images of being dragged.
@@ -101,6 +118,13 @@ export class DeckDeckGoSlideUtils {
     });
   };
 
+  static getAllImages(el: HTMLElement): HTMLElement[] {
+    const allSlotedImages: NodeListOf<HTMLElement> = el.querySelectorAll('[slot] > img');
+    const allShadowImages: NodeListOf<HTMLElement> = el.shadowRoot.querySelectorAll('img');
+
+    return Array.from(allSlotedImages).concat(Array.from(allShadowImages));
+  }
+
   // Source: http://detectmobilebrowsers.com
   static isMobile(): boolean {
     if (!window) {