add color placeholder feature ✨

ApoorvSaxena · Jul 2, 2020 · 2aca9ca · 2aca9ca
1 parent 4509b99
commit 2aca9ca
Show file tree

Hide file tree

Showing 7 changed files with 56 additions and 12 deletions.
diff --git a/README.md b/README.md
@@ -202,6 +202,16 @@ const coolImage = document.querySelector('.image-to-load-first')
 observer.triggerLoad(coolImage);
 ```
 
+### Large image improvment
+
+Sometimes image loading takes a long time. For this case, you can add a placeholder color:
+
+```html
+<img class="lozad" data-placeholder-color="red" data-src="image.png" />
+```
+
+Lozad set the background of `img` element and users will see the fallback.
+
 ## Example with picture tag
 
 Create _a broken_ picture element structure.

diff --git a/demo/assets/css/main.css b/demo/assets/css/main.css
@@ -47,6 +47,7 @@ body {
 
 img {
 	width: 100%;
+	height: 100%;
 }
 
 /* Box Model */

diff --git a/demo/index.html b/demo/index.html
@@ -58,7 +58,7 @@ <h1><a href="https://github.com/ApoorvSaxena/lozad.js"><strong>Lozad.js</strong>
                 <h1>Lozad.js - Performant Lazy Loading Library</h1>
             </article>
             <article class="thumb">
-                <img class="lozad" data-src="images/thumbs/01.jpg" data-index="1" />
+                <img class="lozad" data-placeholder-color="#583624" data-src="images/thumbs/01.jpg" data-index="1" />
                 <noscript><img src="images/thumbs/01.jpg" data-index="1" /></noscript>
                     <h2>Image 1</h2>
             </article>

diff --git a/dist/lozad.es.js b/dist/lozad.es.js
@@ -1,4 +1,4 @@
-/*! lozad.js - v1.15.0 - 2020-05-23
+/*! lozad.js - v1.15.0 - 2020-07-02
 * https://github.com/ApoorvSaxena/lozad.js
 * Copyright (c) 2020 Apoorv Saxena; Licensed MIT */
 
@@ -83,6 +83,12 @@ function markAsLoaded(element) {
   element.setAttribute('data-loaded', true);
 }
 
+function preLoad(element) {
+  if (element.getAttribute('data-placeholder-color')) {
+    element.style.backgroundColor = element.getAttribute('data-placeholder-color');
+  }
+}
+
 const isLoaded = element => element.getAttribute('data-loaded') === 'true';
 
 const onIntersection = (load, loaded) => (entries, observer) => {
@@ -123,6 +129,11 @@ function lozad (selector = '.lozad', options = {}) {
     });
   }
 
+  const elements = getElements(selector, root);
+  for (let i = 0; i < elements.length; i++) {
+    preLoad(elements[i]);
+  }
+
   return {
     observe() {
       const elements = getElements(selector, root);

diff --git a/dist/lozad.js b/dist/lozad.js
@@ -1,4 +1,4 @@
-/*! lozad.js - v1.15.0 - 2020-05-23
+/*! lozad.js - v1.15.0 - 2020-07-02
 * https://github.com/ApoorvSaxena/lozad.js
 * Copyright (c) 2020 Apoorv Saxena; Licensed MIT */
 
@@ -89,6 +89,12 @@
     element.setAttribute('data-loaded', true);
   }
 
+  function preLoad(element) {
+    if (element.getAttribute('data-placeholder-color')) {
+      element.style.backgroundColor = element.getAttribute('data-placeholder-color');
+    }
+  }
+
   var isLoaded = function isLoaded(element) {
     return element.getAttribute('data-loaded') === 'true';
   };
@@ -144,23 +150,28 @@
       });
     }
 
+    var elements = getElements(selector, root);
+    for (var i = 0; i < elements.length; i++) {
+      preLoad(elements[i]);
+    }
+
     return {
       observe: function observe() {
         var elements = getElements(selector, root);
 
-        for (var i = 0; i < elements.length; i++) {
-          if (isLoaded(elements[i])) {
+        for (var _i = 0; _i < elements.length; _i++) {
+          if (isLoaded(elements[_i])) {
             continue;
           }
 
           if (observer) {
-            observer.observe(elements[i]);
+            observer.observe(elements[_i]);
             continue;
           }
 
-          load(elements[i]);
-          markAsLoaded(elements[i]);
-          loaded(elements[i]);
+          load(elements[_i]);
+          markAsLoaded(elements[_i]);
+          loaded(elements[_i]);
         }
       },
       triggerLoad: function triggerLoad(element) {

diff --git a/dist/lozad.min.js b/dist/lozad.min.js
diff --git a/src/lozad.js b/src/lozad.js
@@ -78,6 +78,12 @@ function markAsLoaded(element) {
   element.setAttribute('data-loaded', true)
 }
 
+function preLoad(element) {
+  if (element.getAttribute('data-placeholder-color')) {
+    element.style.backgroundColor = element.getAttribute('data-placeholder-color')
+  }
+}
+
 const isLoaded = element => element.getAttribute('data-loaded') === 'true'
 
 const onIntersection = (load, loaded) => (entries, observer) => {
@@ -118,6 +124,11 @@ export default function (selector = '.lozad', options = {}) {
     })
   }
 
+  const elements = getElements(selector, root)
+  for (let i = 0; i < elements.length; i++) {
+    preLoad(elements[i])
+  }
+
   return {
     observe() {
       const elements = getElements(selector, root)