Picture tag can now handle an inside img tag if it exists (#225)

* Picture tag can now handle an inside img tag if it exists * Add documentation * Add tests
ApoorvSaxena · Sep 6, 2020 · 83fd88b · 83fd88b
1 parent 584be41
commit 83fd88b
Show file tree

Hide file tree

Showing 6 changed files with 68 additions and 11 deletions.
diff --git a/README.md b/README.md
@@ -236,6 +236,18 @@ Create _a broken_ picture element structure.
 
 When _lozad_ loads this picture element, it will fix it.
 
+If you want to use image placeholder (like low quality image placeholder), you can set a temporary `img` tag inside your `picture` tag. It will be removed when _lozad_ loads the picture element.
+
+```html
+<picture class="lozad" style="display: block; min-height: 1rem" data-iesrc="images/thumbs/04.jpg" data-alt="">
+    <source srcset="images/thumbs/04.jpg" media="(min-width: 1280px)">
+    <source srcset="images/thumbs/05.jpg" media="(min-width: 980px)">
+    <source srcset="images/thumbs/06.jpg" media="(min-width: 320px)">
+    <!-- you can define a low quality image placeholder that will be removed when the picture is loaded -->
+    <img src="data:image/jpeg;base64,/some_lqip_in_base_64==" />
+</picture>
+```
+
 ## Example with video
 
 ```html

diff --git a/dist/lozad.es.js b/dist/lozad.es.js
@@ -1,4 +1,4 @@
-/*! lozad.js - v1.15.0 - 2020-08-01
+/*! lozad.js - v1.15.0 - 2020-09-05
 * https://github.com/ApoorvSaxena/lozad.js
 * Copyright (c) 2020 Apoorv Saxena; Licensed MIT */
 
@@ -15,7 +15,14 @@ const defaultConfig = {
   threshold: 0,
   load(element) {
     if (element.nodeName.toLowerCase() === 'picture') {
-      const img = document.createElement('img');
+      let img = element.querySelector('img');
+      let append = false;
+
+      if (img === null) {
+        img = document.createElement('img');
+        append = true;
+      }
+
       if (isIE && element.getAttribute('data-iesrc')) {
         img.src = element.getAttribute('data-iesrc');
       }
@@ -24,7 +31,9 @@ const defaultConfig = {
         img.alt = element.getAttribute('data-alt');
       }
 
-      element.append(img);
+      if (append) {
+        element.append(img);
+      }
     }
 
     if (element.nodeName.toLowerCase() === 'video' && !element.getAttribute('data-src')) {

diff --git a/dist/lozad.js b/dist/lozad.js
@@ -1,4 +1,4 @@
-/*! lozad.js - v1.15.0 - 2020-08-01
+/*! lozad.js - v1.15.0 - 2020-09-05
 * https://github.com/ApoorvSaxena/lozad.js
 * Copyright (c) 2020 Apoorv Saxena; Licensed MIT */
 
@@ -21,7 +21,14 @@
     threshold: 0,
     load: function load(element) {
       if (element.nodeName.toLowerCase() === 'picture') {
-        var img = document.createElement('img');
+        var img = element.querySelector('img');
+        var append = false;
+
+        if (img === null) {
+          img = document.createElement('img');
+          append = true;
+        }
+
         if (isIE && element.getAttribute('data-iesrc')) {
           img.src = element.getAttribute('data-iesrc');
         }
@@ -30,7 +37,9 @@
           img.alt = element.getAttribute('data-alt');
         }
 
-        element.append(img);
+        if (append) {
+          element.append(img);
+        }
       }
 
       if (element.nodeName.toLowerCase() === 'video' && !element.getAttribute('data-src')) {

diff --git a/dist/lozad.min.js b/dist/lozad.min.js
diff --git a/src/lozad.js b/src/lozad.js
@@ -10,7 +10,14 @@ const defaultConfig = {
   threshold: 0,
   load(element) {
     if (element.nodeName.toLowerCase() === 'picture') {
-      const img = document.createElement('img')
+      let img = element.querySelector('img')
+      let append = false
+
+      if (img === null) {
+        img = document.createElement('img')
+        append = true
+      }
+
       if (isIE && element.getAttribute('data-iesrc')) {
         img.src = element.getAttribute('data-iesrc')
       }
@@ -19,7 +26,9 @@ const defaultConfig = {
         img.alt = element.getAttribute('data-alt')
       }
 
-      element.append(img)
+      if (append) {
+        element.append(img)
+      }
     }
 
     if (element.nodeName.toLowerCase() === 'video' && !element.getAttribute('data-src')) {

diff --git a/test/index.js b/test/index.js
@@ -336,6 +336,24 @@ describe('lozad', () => {
       const img = picture.children[1]
       assert.strictEqual('alt text', img.getAttribute('alt'))
     })
+
+    it('should use img tag if inside the picture', () => {
+      const className = 'test-class'
+      const observer = lozad('.' + className)
+      const picture = document.querySelectorAll('picture')[0]
+      picture.setAttribute('class', className)
+
+      const initialImage = document.createElement('img')
+      initialImage.setAttribute('customAttribute', 'custom value')
+      picture.appendChild(initialImage)
+      observer.observe()
+
+      const img = picture.children[1]
+      assert.strictEqual(
+        initialImage.getAttribute('customAttribute'),
+        img.getAttribute('customAttribute')
+      )
+    })
   })
 
   describe('toggle class', () => {