feat: don't show alt while loading and img for error fallback

peterpeterparker · peterpeterparker · commit b63766475a42 · 2019-06-27T17:51:34.000+02:00
diff --git a/webcomponents/lazy-img/src/components.d.ts b/webcomponents/lazy-img/src/components.d.ts
@@ -11,6 +11,7 @@ import { HTMLStencilElement, JSXBase } from '@stencil/core/internal';
 export namespace Components {
   interface DeckgoLazyImg {
     'imgAlt': string;
+    'imgErrorSrc': string;
     'imgSizes': string;
     'imgSrc': string;
     'imgSrcSet': string;
@@ -36,6 +37,7 @@ declare global {
 declare namespace LocalJSX {
   interface DeckgoLazyImg extends JSXBase.HTMLAttributes<HTMLDeckgoLazyImgElement> {
     'imgAlt'?: string;
+    'imgErrorSrc'?: string;
     'imgSizes'?: string;
     'imgSrc'?: string;
     'imgSrcSet'?: string;
diff --git a/webcomponents/lazy-img/src/components/lazy-img/deckdeckgo-lazy-img.tsx b/webcomponents/lazy-img/src/components/lazy-img/deckdeckgo-lazy-img.tsx
@@ -1,4 +1,4 @@
-import {Component, Element, Event, EventEmitter, Method, Prop, Watch, h} from '@stencil/core';
+import {Component, Element, Event, EventEmitter, Method, Prop, Watch, h, State} from '@stencil/core';
 
 @Component({
   tag: 'deckgo-lazy-img',
@@ -29,8 +29,14 @@ export class DeckdeckgoLazyImg {
   @Prop()
   observerThreshold: number | number[];
 
+  @Prop()
+  imgErrorSrc: string;
+
   private observer: IntersectionObserver;
 
+  @State()
+  private imgLoaded: boolean = false;
+
   async componentDidLoad() {
     await this.init();
 
@@ -120,7 +126,30 @@ export class DeckdeckgoLazyImg {
     });
   }
 
+  private loadError(): Promise<void> {
+    return new Promise<void>((resolve) => {
+      const img: HTMLImageElement = this.el.shadowRoot.querySelector('img');
+
+      if (!img) {
+        resolve();
+        return;
+      }
+
+      if (!this.imgErrorSrc || img.src === this.imgErrorSrc) {
+        resolve();
+        return;
+      }
+
+      if (img.src === this.imgSrc || img.srcset === this.imgSrcSet) {
+        img.src = this.imgErrorSrc;
+      }
+
+      resolve();
+    });
+  }
+
   render() {
-    return <img alt={this.imgAlt ? this.imgAlt : this.imgSrc} sizes={this.imgSizes ? this.imgSizes : undefined}/>;
+    return <img alt={this.imgLoaded ? (this.imgAlt ? this.imgAlt : this.imgSrc) : ''} sizes={this.imgSizes ? this.imgSizes : undefined}
+                onLoad={() => this.imgLoaded = true} onError={() => this.loadError()}/>;
   }
 }
diff --git a/webcomponents/lazy-img/src/index.html b/webcomponents/lazy-img/src/index.html
@@ -19,8 +19,8 @@
 </head>
 <body>
 
-  <deckgo-lazy-img img-src="https://deckdeckgo.com/assets/img/deckdeckgo.png"></deckgo-lazy-img>
-  <deckgo-lazy-img img-src="https://deckdeckgo.com/assets/img/deckdeckgo.png"></deckgo-lazy-img>
+  <deckgo-lazy-img img-src="https://deckdeckgo.com/assets/img/deckdeckgoadsasd.png" img-error-src="https://deckdeckgo.com/assets/img/projector.svg"></deckgo-lazy-img>
+  <deckgo-lazy-img img-src="https://deckdeckgo.com/assets/img/deckdeckgasdadso.png"></deckgo-lazy-img>
   <deckgo-lazy-img img-src="https://deckdeckgo.com/assets/img/deckdeckgo.png"></deckgo-lazy-img>
   <deckgo-lazy-img img-src="https://deckdeckgo.com/assets/img/deckdeckgo.png"></deckgo-lazy-img>
   <deckgo-lazy-img img-src="https://deckdeckgo.com/assets/img/deckdeckgo.png"></deckgo-lazy-img>
