🔔 #175 #294 add srcset <picture> support

- use currentSrc - emit progress with <picture> - ✅ add <picture> test - ✅ test srcset - add test css - remove bower_components
desandro · Feb 9, 2022 · 1915f05 · 1915f05
1 parent b059c1f
commit 1915f05
Show file tree

Hide file tree

Showing 8 changed files with 135 additions and 5 deletions.
diff --git a/imagesloaded.js b/imagesloaded.js
@@ -190,7 +190,7 @@ ImagesLoaded.prototype.progress = function( image, elem, message ) {
   }
 
   if ( this.options.debug && console ) {
-    console.log( 'progress: ' + message, image, elem );
+    console.log( `progress: ${message}`, image, elem );
   }
 };
 
@@ -230,7 +230,7 @@ LoadingImage.prototype.check = function() {
   // bind to image as well for Firefox. #191
   this.img.addEventListener( 'load', this );
   this.img.addEventListener( 'error', this );
-  this.proxyImage.src = this.img.src;
+  this.proxyImage.src = this.img.currentSrc || this.img.src;
 };
 
 LoadingImage.prototype.getIsImageComplete = function() {
@@ -241,7 +241,10 @@ LoadingImage.prototype.getIsImageComplete = function() {
 
 LoadingImage.prototype.confirm = function( isLoaded, message ) {
   this.isLoaded = isLoaded;
-  this.emitEvent( 'progress', [ this, this.img, message ] );
+  let { parentNode } = this.img;
+  // emit progress with parent <picture> or self <img>
+  let elem = parentNode.nodeName == 'PICTURE' ? parentNode : this.img;
+  this.emitEvent( 'progress', [ this, elem, message ] );
 };
 
 // ----- events ----- //

diff --git a/sandbox/background/index.html b/sandbox/background/index.html
@@ -22,7 +22,7 @@ <h1>background</h1>
 
 <div class="box blue"></div>
 
-<script src="../../bower_components/ev-emitter/ev-emitter.js"></script>
+<script src="../../node_modules/ev-emitter/ev-emitter.js"></script>
 <script src="../../imagesloaded.js"></script>
 <script>
 

diff --git a/sandbox/picture.html b/sandbox/picture.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+
+  <title>picture</title>
+
+</head>
+<body>
+
+    <picture>
+      <source srcset="https://picsum.photos/id/103/1200/900" media="(min-width: 1200px)">
+      <source srcset="https://picsum.photos/id/103/800/600" media="(min-width: 800px)">
+      <img src="https://picsum.photos/id/103/400/300">
+    </picture>
+
+</body>
+</html>
diff --git a/sandbox/progress/index.html b/sandbox/progress/index.html
@@ -81,7 +81,7 @@ <h1>progress</h1>
   </div>
   <div id="image-container"></div>
 
-<script src="../../bower_components/ev-emitter/ev-emitter.js"></script>
+<script src="../../node_modules/ev-emitter/ev-emitter.js"></script>
 <script src="../../imagesloaded.js"></script>
 <script src="progress.js"></script>
 

diff --git a/test/css/tests.css b/test/css/tests.css
@@ -1,8 +1,18 @@
+body {
+  font-family: sans-serif;
+}
+
 img {
   display: inline-block;
   max-width: 240px;
 }
 
+#qunit {
+  max-width: 600px;
+  right: 0;
+  left: auto;
+}
+
 /* ---- backgrounds ---- */
 
 .bg-box {

diff --git a/test/index.html b/test/index.html
@@ -25,6 +25,8 @@
   <script src="unit/jquery-fail.js"></script>
   <script src="unit/non-element.js"></script>
   <script src="unit/background.js"></script>
+  <script src="unit/picture.js"></script>
+  <script src="unit/srcset.js"></script>
 
 </head>
 <body>
@@ -100,5 +102,67 @@ <h2>background</h2>
     </div>
   </div>
 
+  <h2>picture</h2>
+
+  <div id="picture-list">
+    <picture>
+      <source srcset="https://picsum.photos/id/1036/1200/900" media="(min-width: 1200px)">
+      <source srcset="https://picsum.photos/id/1036/800/600" media="(min-width: 800px)">
+      <img src="https://picsum.photos/id/1036/400/300">
+    </picture>
+    <picture>
+      <source srcset="https://picsum.photos/id/103/1200/900" media="(min-width: 1200px)">
+      <source srcset="https://picsum.photos/id/103/800/600" media="(min-width: 800px)">
+      <img src="https://picsum.photos/id/103/400/300">
+    </picture>
+    <picture>
+      <source srcset="https://picsum.photos/id/1080/900/1200" media="(min-width: 1200px)">
+      <source srcset="https://picsum.photos/id/1080/600/800" media="(min-width: 800px)">
+      <img src="https://picsum.photos/id/1080/300/400">
+    </picture>
+  </div>
+
+  <h2>srcset</h2>
+
+  <div id="srcset">
+    <img
+      srcset="
+        https://picsum.photos/id/1074/1200/900 1200w,
+        https://picsum.photos/id/1074/800/600 800w,
+        https://picsum.photos/id/1074/400/300 400w
+      "
+      sizes="
+        (min-width: 1200px) 240px,
+        (min-width: 800px) 240px,
+        240px,
+      "
+    >
+    <img
+      srcset="
+        https://picsum.photos/id/159/900/1200 900w,
+        https://picsum.photos/id/159/600/800 600w,
+        https://picsum.photos/id/159/300/400 300w
+      "
+      sizes="
+        (min-width: 1200px) 240px,
+        (min-width: 800px) 240px,
+        240px,
+      "
+    >
+    <img
+      srcset="
+        https://picsum.photos/id/133/1200/900 1200w,
+        https://picsum.photos/id/133/800/600 800w,
+        https://picsum.photos/id/133/400/300 400w
+      "
+      sizes="
+        (min-width: 1200px) 240px,
+        (min-width: 800px) 240px,
+        240px,
+      "
+    >
+  </div>
+
+
 </body>
 </html>
diff --git a/test/unit/picture.js b/test/unit/picture.js
@@ -0,0 +1,17 @@
+QUnit.test( 'picture', function( assert ) {
+
+  let done = assert.async( 4 );
+
+  let imgLoad0 = imagesLoaded( '#picture-list', function() {
+    assert.ok( true, 'callback triggered on #picture-list' );
+    done();
+  } );
+  assert.equal( imgLoad0.images.length, 3, '3 images on #picture-list' );
+
+  imgLoad0.on( 'progress', function( instance, image, element ) {
+    assert.ok( element.nodeName == 'PICTURE', 'progress; element is picture' );
+    assert.ok( image.isLoaded, 'progress; image.isLoaded' );
+    done();
+  } );
+
+} );
diff --git a/test/unit/srcset.js b/test/unit/srcset.js
@@ -0,0 +1,17 @@
+QUnit.test( 'srcset', function( assert ) {
+
+  let done = assert.async( 4 );
+
+  let imgLoad0 = imagesLoaded( '#srcset', function() {
+    assert.ok( true, 'callback triggered on #srcset' );
+    done();
+  } );
+  assert.equal( imgLoad0.images.length, 3, '3 images on #srcset' );
+
+  imgLoad0.on( 'progress', function( instance, image, element ) {
+    assert.ok( element.nodeName == 'IMG', 'progress; element is img' );
+    assert.ok( image.isLoaded, 'progress; image.isLoaded' );
+    done();
+  } );
+
+} );