Merge pull request #509 from deckgo/lazy-img

feat(#508): smoothly display the loaded images
deckgo · Nov 29, 2019 · aeb2f5a · aeb2f5a
2 parents aadd1ce + c817666
commit aeb2f5a
Show file tree

Hide file tree

Showing 5 changed files with 55 additions and 25 deletions.
diff --git a/docs/docs/components/app-components-lazy-img/app-components-lazy-img.md b/docs/docs/components/app-components-lazy-img/app-components-lazy-img.md
@@ -110,6 +110,9 @@ The following theming options will affect this component if set on its host or p
 | --deckgo-lazy-img-display | | The display property of the image |
 | --deckgo-lazy-img-border-radius | | In case you would like to specify a border radius for the image |
 | --deckgo-lazy-img-object-fit  | | The property object-fit of the image |
+| --deckgo-lazy-img-opacity-not-loaded  | 0 | The opacity of the image when not loaded |
+| --deckgo-lazy-img-opacity-loaded  | 1 | The opacity of the image when loaded |
+| --deckgo-lazy-img-transition  | opacity 0.15s linear | The animation of the image, notably use to display smoothly the image when loaded |
 
 ### Methods
 

diff --git a/docs/src/app/pages/docs/components/app-components-lazy-img/app-components-lazy-img.tsx b/docs/src/app/pages/docs/components/app-components-lazy-img/app-components-lazy-img.tsx
@@ -215,6 +215,21 @@ export class AppComponentsLazyImg {
 <td></td>
 <td>The property object-fit of the image</td>
 </tr>
+<tr>
+<td>--deckgo-lazy-img-opacity-not-loaded</td>
+<td>0</td>
+<td>The opacity of the image when not loaded</td>
+</tr>
+<tr>
+<td>--deckgo-lazy-img-opacity-loaded</td>
+<td>1</td>
+<td>The opacity of the image when loaded</td>
+</tr>
+<tr>
+<td>--deckgo-lazy-img-transition</td>
+<td>opacity 0.15s linear</td>
+<td>The animation of the image, notably use to display smoothly the image when loaded</td>
+</tr>
 </tbody></table>
 <h3 id="app-components-lazy-img-methods">Methods</h3>
 <p>This component also export an async method <code>lazyLoad()</code> in case you would like to trigger &quot;manually&quot; the loading of the image.</p>

diff --git a/webcomponents/lazy-img/src/components/lazy-img/deckdeckgo-lazy-img.scss b/webcomponents/lazy-img/src/components/lazy-img/deckdeckgo-lazy-img.scss
@@ -2,6 +2,12 @@
   fill: currentColor;
 }
 
+:host(.loaded) {
+  img, svg {
+    opacity: var(--deckgo-lazy-img-opacity-loaded, 1);
+  }
+}
+
 img, svg {
   pointer-events: var(--deckgo-lazy-img-pointer-events, none);
 
@@ -25,4 +31,8 @@ img, svg {
   border-radius: var(--deckgo-lazy-img-border-radius);
 
   object-fit: var(--deckgo-lazy-img-object-fit);
+
+  opacity: var(--deckgo-lazy-img-opacity-not-loaded, 0);
+
+  transition: var(--deckgo-lazy-img-transition, opacity 0.15s linear);
 }
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
@@ -189,12 +189,14 @@ export class DeckdeckgoLazyImg {
   }
 
   render() {
+    const hostClass: string = this.imgLoaded ? 'loaded' : '';
+
     if (this.svgContent) {
-      return <Host>
+      return <Host class={hostClass}>
         <div innerHTML={this.svgContent}></div>
       </Host>
     } else {
-      return <Host>
+      return <Host class={hostClass}>
         {this.renderImage()}
       </Host>;
     }

diff --git a/webcomponents/lazy-img/src/index.html b/webcomponents/lazy-img/src/index.html
@@ -19,37 +19,37 @@
 </head>
 <body>
 
-  <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 intrinsicsize="300x300" img-src="https://deckdeckgo.com/assets/img/deckdeckgasdadso.png"></deckgo-lazy-img>
+  <deckgo-lazy-img img-src="https://docs.deckdeckgo.com/assets/img/deckdeckgoadsasd.png" img-error-src="https://deckdeckgo.com/assets/icons/album.svg"></deckgo-lazy-img>
+  <deckgo-lazy-img intrinsicsize="300x300" img-src="https://docs.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://docs.deckdeckgo.com/assets/img/deckdeckgo.png"></deckgo-lazy-img>
 
   <deckgo-lazy-img svg-src="globe.svg" aria-label="Hello"></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>
-  <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>
-  <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>
-  <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-homecoming.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>
-  <deckgo-lazy-img img-src="https://deckdeckgo.com/assets/img/deckdeckgo.png"></deckgo-lazy-img>
+  <deckgo-lazy-img img-src="https://docs.deckdeckgo.com/assets/img/deckdeckgo.png"></deckgo-lazy-img>
+  <deckgo-lazy-img img-src="https://docs.deckdeckgo.com/assets/img/deckdeckgo.png"></deckgo-lazy-img>
+  <deckgo-lazy-img img-src="https://docs.deckdeckgo.com/assets/img/deckdeckgo.png"></deckgo-lazy-img>
+  <deckgo-lazy-img img-src="https://docs.deckdeckgo.com/assets/img/deckdeckgo.png"></deckgo-lazy-img>
+  <deckgo-lazy-img img-src="https://docs.deckdeckgo.com/assets/img/deckdeckgo.png"></deckgo-lazy-img>
+  <deckgo-lazy-img img-src="https://docs.deckdeckgo.com/assets/img/deckdeckgo.png"></deckgo-lazy-img>
+  <deckgo-lazy-img img-src="https://docs.deckdeckgo.com/assets/img/deckdeckgo.png"></deckgo-lazy-img>
+  <deckgo-lazy-img img-src="https://docs.deckdeckgo.com/assets/img/deckdeckgo.png"></deckgo-lazy-img>
+  <deckgo-lazy-img img-src="https://docs.deckdeckgo.com/assets/img/deckdeckgo.png"></deckgo-lazy-img>
+  <deckgo-lazy-img img-src="https://docs.deckdeckgo.com/assets/img/deckdeckgo.png"></deckgo-lazy-img>
+  <deckgo-lazy-img img-src="https://docs.deckdeckgo.com/assets/img/deckdeckgo.png"></deckgo-lazy-img>
+  <deckgo-lazy-img img-src="https://docs.deckdeckgo.com/assets/img/deckdeckgo-homecoming.png"></deckgo-lazy-img>
+  <deckgo-lazy-img img-src="https://docs.deckdeckgo.com/assets/img/deckdeckgo.png"></deckgo-lazy-img>
+  <deckgo-lazy-img img-src="https://docs.deckdeckgo.com/assets/img/deckdeckgo.png"></deckgo-lazy-img>
+  <deckgo-lazy-img img-src="https://docs.deckdeckgo.com/assets/img/deckdeckgo.png"></deckgo-lazy-img>
+  <deckgo-lazy-img img-src="https://docs.deckdeckgo.com/assets/img/deckdeckgo.png"></deckgo-lazy-img>
   <deckgo-lazy-img img-src="https://secure.meetupstatic.com/photos/member/9/c/4/2/member_272620002.jpeg"></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>
+  <deckgo-lazy-img img-src="https://docs.deckdeckgo.com/assets/img/deckdeckgo.png"></deckgo-lazy-img>
+  <deckgo-lazy-img img-src="https://docs.deckdeckgo.com/assets/img/deckdeckgo.png"></deckgo-lazy-img>
+  <deckgo-lazy-img img-src="https://docs.deckdeckgo.com/assets/img/deckdeckgo.png"></deckgo-lazy-img>
 
   <deckgo-lazy-img style="background: red;"
     img-sizes="(min-width: 40em) 80vw, 100vw"
-    img-src-set="https://deckdeckgo.com/assets/img/deckdeckgo.png 1x, https://deckdeckgo.com/assets/img/deckdeckgo.svg 2x"></deckgo-lazy-img>
+    img-src-set="https://docs.deckdeckgo.com/assets/img/deckdeckgo.png 1x, https://docs.deckdeckgo.com/assets/img/deckdeckgo.svg 2x"></deckgo-lazy-img>
 
 </body>
 </html>