Merge branch 'release/1.0.0-alpha.8' into master

Author: titouanmathis

demo/src/css/styles.scss

@@ -20,14 +20,6 @@ main {
   display: none;
 }
 
-.lazyload {
-  opacity: 0;
-}
-
-.lazyloaded {
-  // opacity: 1;s
-}
-
 [data-breakpoint]::after,
 [data-breakpoint]::before {
   z-index: -999;

demo/src/index.html

@@ -153,7 +153,7 @@
           </button>
           <div data-ref="container" class="relative overflow-hidden" aria-hidden="true">
             <div data-ref="content" class="w-full p-4 pt-0">
-              <img src="https://placekitten.com/200/100" width="200" height="100" alt="" />
+              <img data-options='{ "log": true }' data-src="https://placekitten.com/200/100" width="200" height="100" alt="" />
             </div>
           </div>
         </div>
@@ -168,7 +168,7 @@
           </button>
           <div data-ref="container" class="relative overflow-hidden" aria-hidden="true">
             <div data-ref="content" class="w-full p-4 pt-0">
-              <img src="https://placekitten.com/200/120" width="200" height="120" alt="" />
+              <img data-src="https://placekitten.com/200/120" width="200" height="120" alt="" />
             </div>
           </div>
         </div>
@@ -183,7 +183,7 @@
           </button>
           <div data-ref="container" class="relative overflow-hidden" aria-hidden="true">
             <div data-ref="content" class="w-full p-4 pt-0">
-              <img src="https://placekitten.com/200/80" width="200" height="80" alt="" />
+              <img data-src="https://placekitten.com/200/80" width="200" height="80" alt="" />
             </div>
           </div>
         </div>
@@ -217,10 +217,10 @@ <h2 id="components-tabs" class="text-lg mb-4">Tabs</h2>
             ac aliquam purus finibus. Pellentesque aliquet augue non sollicitudin semper. Vivamus
             est odio, efficitur vitae lacus id, eleifend maximus felis.
           </div>
-          <div data-ref="content" aria-hidden="true">
+          <div data-ref="content" aria-hidden="true" style="display: none;">
             <img
-              data-src="https://placekitten.com/300/300"
-              class="lazyload"
+              data-src="https://placekitten.com/299/299"
+              data-options='{ "log": true }'
               src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
               width="300"
               height="300"

demo/src/js/app.js

@@ -3,12 +3,12 @@ import { Base, Modal, MediaQuery, Tabs, Accordion } from '../../../src';
 class App extends Base {
   get config() {
     return {
-      log: true,
       name: 'App',
       components: {
         Accordion,
         Cursor: () => import('./components/Cursor'),
         Skew: () => import('./components/Skew'),
+        '[data-src]': () => import('./components/Lazyload'),
         Modal,
         MediaQuery,
         Tabs,
@@ -21,8 +21,6 @@ class App extends Base {
   }
 
   loaded() {
-    // eslint-disable-next-line
-    // import('lazysizes');
     this.$log('Loaded');
   }
 

demo/src/js/components/Lazyload.js

@@ -0,0 +1,56 @@
+import { Base } from '../../../../src';
+import transition, { setClassesOrStyles } from '../../../../src/utils/css/transition';
+
+export default class Lazyload extends Base {
+  get config() {
+    return {
+      name: 'Lazyload',
+      styles: {
+        unloaded: { opacity: 0 },
+        active: { transition: 'opacity 0.5s' },
+        loaded: '',
+      },
+    };
+  }
+
+  mounted() {
+    setClassesOrStyles(this.$el, this.$options.styles.unloaded);
+
+    this.observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          window.requestIdleCallback(this.load);
+        }
+      },
+      {
+        threshold: 1.0,
+      }
+    );
+  }
+
+  loaded() {
+    this.observer.observe(this.$el);
+  }
+
+  destroyed() {
+    this.observer.disconnect();
+  }
+
+  load() {
+    const { unloaded, active, loaded } = this.$options.styles;
+    const src = this.$el.getAttribute('data-src');
+    const img = new Image();
+    img.onload = () => {
+      this.$el.setAttribute('src', src);
+      this.$el.removeAttribute('data-src');
+      transition(this.$el, {
+        from: unloaded,
+        active,
+        to: loaded,
+      });
+      setClassesOrStyles(this.$el, loaded);
+      this.$destroy();
+    };
+    img.src = src;
+  }
+}