🔔 #1109 add <source> support for lazyLoad

metafizzy · Mar 3, 2022 · 9565bac · 9565bac
1 parent 97dd3d0
commit 9565bac
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 4 deletions.
diff --git a/js/lazyload.js b/js/lazyload.js
@@ -20,7 +20,8 @@
 const lazyAttr = 'data-flickity-lazyload';
 const lazySrcAttr = `${lazyAttr}-src`;
 const lazySrcsetAttr = `${lazyAttr}-srcset`;
-const imgSelector = `img[${lazyAttr}], img[${lazySrcAttr}], img[${lazySrcsetAttr}]`;
+const imgSelector = `img[${lazyAttr}], img[${lazySrcAttr}], ` +
+  `img[${lazySrcsetAttr}], source[${lazySrcsetAttr}]`;
 
 Flickity.create.lazyLoad = function() {
   this.on( 'select', this.lazyLoad );
@@ -31,7 +32,7 @@ Flickity.create.lazyLoad = function() {
 let proto = Flickity.prototype;
 
 proto.lazyLoad = function() {
-  let lazyLoad = this.options.lazyLoad;
+  let { lazyLoad } = this.options;
   if ( !lazyLoad ) return;
 
   // get adjacent cells, use lazyLoad option for adjacent count
@@ -108,7 +109,8 @@ LazyLoader.prototype.complete = function( event, className ) {
   // unbind events
   this.img.removeEventListener( 'load', this );
   this.img.removeEventListener( 'error', this );
-  this.img.classList.add( className );
+  let mediaElem = this.img.parentNode.matches('picture') ? this.img.parentNode : this.img;
+  mediaElem.classList.add( className );
 
   this.onComplete( this.img, event );
 };

diff --git a/sandbox/lazyload.html b/sandbox/lazyload.html
@@ -38,7 +38,8 @@
     background: #DDD;
   }
 
-  .carousel__cell__image {
+  .carousel__cell__image,
+  .carousel__cell__image img {
     display: block;
     max-width: 100%;
     max-height: 400px;
@@ -202,6 +203,32 @@ <h2>srcset</h2>
   </div>
 </div>
 
+<h2>&lt;picture&gt;</h2>
+
+<div class="carousel" data-flickity='{ "lazyLoad": true }'>
+  <div class="carousel__cell">
+    <picture class="carousel__cell__image">
+      <source data-flickity-lazyload-srcset="https://picsum.photos/id/1036/1200/900" media="(min-width: 1200px)">
+      <source data-flickity-lazyload-srcset="https://picsum.photos/id/1036/800/600" media="(min-width: 800px)">
+      <img data-flickity-lazyload-src="https://picsum.photos/id/1036/400/300">
+    </picture>
+  </div>
+  <div class="carousel__cell">
+    <picture class="carousel__cell__image">
+      <source data-flickity-lazyload-srcset="https://picsum.photos/id/103/1200/900" media="(min-width: 1200px)">
+      <source data-flickity-lazyload-srcset="https://picsum.photos/id/103/800/600" media="(min-width: 800px)">
+      <img data-flickity-lazyload-src="https://picsum.photos/id/103/400/300">
+    </picture>
+  </div>
+  <div class="carousel__cell">
+    <picture class="carousel__cell__image">
+      <source data-flickity-lazyload-srcset="https://picsum.photos/id/1080/900/1200" media="(min-width: 1200px)">
+      <source data-flickity-lazyload-srcset="https://picsum.photos/id/1080/600/800" media="(min-width: 800px)">
+      <img data-flickity-lazyload-src="https://picsum.photos/id/1080/300/400">
+    </picture>
+  </div>
+</div>
+
 <!-- jQuery -->
 <script src="../node_modules/jquery/dist/jquery.js"></script>
 <script src="../node_modules/jquery-bridget/jquery-bridget.js"></script>