From f4114ef5da52254a47181572783a4691212ff447 Mon Sep 17 00:00:00 2001
From: Patrick Schaper <yesman82@gmail.com>
Date: Tue, 6 Oct 2020 15:38:19 +0200
Subject: [PATCH 1/4] picture tag lazy loading

- Allow picture source tags to be lazy loaded
---
 js/lazyload.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/js/lazyload.js b/js/lazyload.js
index 73789e73..2ad69c60 100644
--- a/js/lazyload.js
+++ b/js/lazyload.js
@@ -68,7 +68,8 @@ function getCellLazyImages( cellElem ) {
   }
   // select lazy images in cell
   var lazySelector = 'img[data-flickity-lazyload], ' +
-    'img[data-flickity-lazyload-src], img[data-flickity-lazyload-srcset]';
+    'img[data-flickity-lazyload-src], img[data-flickity-lazyload-srcset], ' +
+    'source[data-flickity-lazyload-srcset]';
   var imgs = cellElem.querySelectorAll( lazySelector );
   return utils.makeArray( imgs );
 }

From a26dda301f23f3661a1ec88cce535b6f20894b42 Mon Sep 17 00:00:00 2001
From: Patrick Schaper <patrick.schaper@aoe.com>
Date: Tue, 6 Oct 2020 16:38:37 +0200
Subject: [PATCH 2/4] picture tag lazy loading

- added test
---
 test/index.html                      | 20 ++++++++++++++++++++
 test/unit/lazyload-picture-srcset.js | 28 ++++++++++++++++++++++++++++
 2 files changed, 48 insertions(+)
 create mode 100644 test/unit/lazyload-picture-srcset.js

diff --git a/test/index.html b/test/index.html
index 8e6a9160..f72e22f4 100644
--- a/test/index.html
+++ b/test/index.html
@@ -55,6 +55,7 @@
   <script src="unit/destroy.js"></script>
   <script src="unit/lazyload.js"></script>
   <script src="unit/lazyload-srcset.js"></script>
+  <script src="unit/lazyload-picture-srcset.js"></script>
   <script src="unit/group-cells.js"></script>
   <script src="unit/adaptive-height.js"></script>
   <script src="unit/select-cell.js"></script>
@@ -239,6 +240,25 @@ <h2>lazyload srcset</h2>
     <div class="cell"></div>
   </div>
 
+  <h2>lazyload picture source srcset</h2>
+  <div id="lazyload-picture-srcset" class="gallery">
+    <div class="cell">
+      <picture>
+        <source
+          data-flickity-lazyload-srcset="https://via.placeholder.com/800x600.png?text=Image+1+Large+1x 1x,
+          https://via.placeholder.com/1600x1200.png?text=Image+1+Large+2x 2x" media="(min-width: 800px)">
+        <source
+          data-flickity-lazyload-srcset="https://via.placeholder.com/320x200.png?text=Image+1+Small+1x 1x,
+            https://via.placeholder.com/640x400.png?text=LImage+1+arge+2x 2x" media="(max-width: 799px)">
+        <img data-flickity-lazyload-src="https://via.placeholder.com/800x600.png?text=Image+1+Fallback">
+      </picture>
+    </div>
+    <div class="cell"></div>
+    <div class="cell"></div>
+    <div class="cell"></div>
+    <div class="cell"></div>
+  </div>
+
   <h2>groupCells</h2>
   <div id="group-cells" class="gallery">
     <div class="cell"></div>
diff --git a/test/unit/lazyload-picture-srcset.js b/test/unit/lazyload-picture-srcset.js
new file mode 100644
index 00000000..055b5e66
--- /dev/null
+++ b/test/unit/lazyload-picture-srcset.js
@@ -0,0 +1,28 @@
+QUnit.test( 'lazyload picture srcset', function( assert ) {
+  'use strict';
+
+  var done = assert.async();
+
+  var gallery = document.querySelector('#lazyload-picture-srcset');
+  var flkty = new Flickity( gallery, {
+    lazyLoad: 1,
+  } );
+
+  var loadCount = 0;
+  flkty.on( 'lazyLoad', function( event, cellElem ) {
+    loadCount++;
+
+    assert.equal( event.type, 'load', 'event.type == load' );
+    assert.ok( event.target.complete, 'img ' + loadCount + ' is complete' );
+    assert.ok( cellElem, 'cellElement argument there' );
+    var srcset = event.target.getAttribute('srcset');
+    assert.ok( srcset, 'srcset attribute set' );
+    var lazyAttr = event.target.getAttribute('data-flickity-lazyload-srcset');
+    assert.ok( !lazyAttr, 'data-flickity-lazyload attribute removed' );
+
+    if ( loadCount == 2 ) {
+      done();
+    }
+  } );
+
+} );

From 9e0731c17964e2211e4e8c9ca68e887949cadd6b Mon Sep 17 00:00:00 2001
From: Patrick Schaper <patrick.schaper@aoe.com>
Date: Tue, 6 Oct 2020 17:10:40 +0200
Subject: [PATCH 3/4] picture tag lazy loading

- updated source tag test
- not setting src attribute if none preset
---
 js/lazyload.js                       |  4 +++-
 test/index.html                      | 12 ++++--------
 test/unit/lazyload-picture-srcset.js | 10 ++++++----
 3 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/js/lazyload.js b/js/lazyload.js
index 2ad69c60..9ecee65a 100644
--- a/js/lazyload.js
+++ b/js/lazyload.js
@@ -97,7 +97,9 @@ LazyLoader.prototype.load = function() {
     this.img.getAttribute('data-flickity-lazyload-src');
   var srcset = this.img.getAttribute('data-flickity-lazyload-srcset');
   // set src & serset
-  this.img.src = src;
+  if ( src ) {
+    this.img.src = src;
+  }
   if ( srcset ) {
     this.img.setAttribute( 'srcset', srcset );
   }
diff --git a/test/index.html b/test/index.html
index f72e22f4..1579b649 100644
--- a/test/index.html
+++ b/test/index.html
@@ -245,18 +245,14 @@ <h2>lazyload picture source srcset</h2>
     <div class="cell">
       <picture>
         <source
-          data-flickity-lazyload-srcset="https://via.placeholder.com/800x600.png?text=Image+1+Large+1x 1x,
-          https://via.placeholder.com/1600x1200.png?text=Image+1+Large+2x 2x" media="(min-width: 800px)">
+          data-flickity-lazyload-srcset="https://via.placeholder.com/800x600.png?text=Large+1x 1x,
+          https://via.placeholder.com/1600x1200.png?text=Large+2x 2x" media="(min-width: 800px)">
         <source
-          data-flickity-lazyload-srcset="https://via.placeholder.com/320x200.png?text=Image+1+Small+1x 1x,
-            https://via.placeholder.com/640x400.png?text=LImage+1+arge+2x 2x" media="(max-width: 799px)">
+          data-flickity-lazyload-srcset="https://via.placeholder.com/320x200.png?text=Small+1x 1x,
+            https://via.placeholder.com/640x400.png?text=Small+2x 2x" media="(max-width: 799px)">
         <img data-flickity-lazyload-src="https://via.placeholder.com/800x600.png?text=Image+1+Fallback">
       </picture>
     </div>
-    <div class="cell"></div>
-    <div class="cell"></div>
-    <div class="cell"></div>
-    <div class="cell"></div>
   </div>
 
   <h2>groupCells</h2>
diff --git a/test/unit/lazyload-picture-srcset.js b/test/unit/lazyload-picture-srcset.js
index 055b5e66..e13b64db 100644
--- a/test/unit/lazyload-picture-srcset.js
+++ b/test/unit/lazyload-picture-srcset.js
@@ -15,10 +15,12 @@ QUnit.test( 'lazyload picture srcset', function( assert ) {
     assert.equal( event.type, 'load', 'event.type == load' );
     assert.ok( event.target.complete, 'img ' + loadCount + ' is complete' );
     assert.ok( cellElem, 'cellElement argument there' );
-    var srcset = event.target.getAttribute('srcset');
-    assert.ok( srcset, 'srcset attribute set' );
-    var lazyAttr = event.target.getAttribute('data-flickity-lazyload-srcset');
-    assert.ok( !lazyAttr, 'data-flickity-lazyload attribute removed' );
+    var sources = cellElem.querySelectorAll('source[srcset]');
+    assert.equal( sources.length, 2, 'All source elements of cell loaded' );
+    var lazyAttr = Array.from( sources ).some( function( el ) {
+      return el.getAttribute('data-flickity-lazyload-srcset');
+    } );
+    assert.ok( !lazyAttr, 'data-flickity-lazyload-srcset attribute removed' );
 
     if ( loadCount == 2 ) {
       done();

From 4fa377034399743d29d1f362f750bdb956112c63 Mon Sep 17 00:00:00 2001
From: Patrick Schaper <patrick.schaper@aoe.com>
Date: Tue, 20 Oct 2020 16:38:07 +0200
Subject: [PATCH 4/4] picture tag lazy loading

- check img tag name before setting property 'src'
---
 js/lazyload.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/js/lazyload.js b/js/lazyload.js
index 9ecee65a..b4c1fcc5 100644
--- a/js/lazyload.js
+++ b/js/lazyload.js
@@ -97,7 +97,7 @@ LazyLoader.prototype.load = function() {
     this.img.getAttribute('data-flickity-lazyload-src');
   var srcset = this.img.getAttribute('data-flickity-lazyload-srcset');
   // set src & serset
-  if ( src ) {
+  if ( this.img.tagName.toLowerCase() === 'img' && src ) {
     this.img.src = src;
   }
   if ( srcset ) {