extends placeholder feature to any background

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

Hide file tree

Showing 6 changed files with 9 additions and 9 deletions.
diff --git a/README.md b/README.md
@@ -207,7 +207,7 @@ observer.triggerLoad(coolImage);
 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" />
+<img class="lozad" data-placeholder="red" data-src="image.png" />
 ```
 
 Lozad set the background of `img` element and users will see the fallback.

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-placeholder-color="#583624" data-src="images/thumbs/01.jpg" data-index="1" />
+                <img class="lozad" data-placeholder="#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
@@ -84,8 +84,8 @@ function markAsLoaded(element) {
 }
 
 function preLoad(element) {
-  if (element.getAttribute('data-placeholder-color')) {
-    element.style.backgroundColor = element.getAttribute('data-placeholder-color');
+  if (element.getAttribute('data-placeholder')) {
+    element.style.background = element.getAttribute('data-placeholder');
   }
 }
 

diff --git a/dist/lozad.js b/dist/lozad.js
@@ -90,8 +90,8 @@
   }
 
   function preLoad(element) {
-    if (element.getAttribute('data-placeholder-color')) {
-      element.style.backgroundColor = element.getAttribute('data-placeholder-color');
+    if (element.getAttribute('data-placeholder')) {
+      element.style.background = element.getAttribute('data-placeholder');
     }
   }
 

diff --git a/dist/lozad.min.js b/dist/lozad.min.js
diff --git a/src/lozad.js b/src/lozad.js
@@ -79,8 +79,8 @@ function markAsLoaded(element) {
 }
 
 function preLoad(element) {
-  if (element.getAttribute('data-placeholder-color')) {
-    element.style.backgroundColor = element.getAttribute('data-placeholder-color')
+  if (element.getAttribute('data-placeholder')) {
+    element.style.background = element.getAttribute('data-placeholder')
   }
 }