From 1915f05be6894835b545a2dc7cd49c9ea13c8c36 Mon Sep 17 00:00:00 2001 From: Dave DeSandro Date: Tue, 8 Feb 2022 15:19:28 -0500 Subject: [PATCH] =?UTF-8?q?=F0=9F=94=94=20#175=20#294=20add=20srcset=20=20support?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - use currentSrc - emit progress with - ✅ add test - ✅ test srcset - add test css - remove bower_components --- imagesloaded.js | 9 +++-- sandbox/background/index.html | 2 +- sandbox/picture.html | 19 +++++++++++ sandbox/progress/index.html | 2 +- test/css/tests.css | 10 ++++++ test/index.html | 64 +++++++++++++++++++++++++++++++++++ test/unit/picture.js | 17 ++++++++++ test/unit/srcset.js | 17 ++++++++++ 8 files changed, 135 insertions(+), 5 deletions(-) create mode 100644 sandbox/picture.html create mode 100644 test/unit/picture.js create mode 100644 test/unit/srcset.js diff --git a/imagesloaded.js b/imagesloaded.js index af47cbd..e705497 100644 --- 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 or self + 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 index 853f8ff..2b7846e 100644 --- a/sandbox/background/index.html +++ b/sandbox/background/index.html @@ -22,7 +22,7 @@

background

- + + diff --git a/test/css/tests.css b/test/css/tests.css index af8a7e8..dc3466b 100644 --- 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 index eb32e69..f009187 100644 --- a/test/index.html +++ b/test/index.html @@ -25,6 +25,8 @@ + + @@ -100,5 +102,67 @@

background

+

picture

+ +
+ + + + + + + + + + + + + + + +
+ +

srcset

+ +
+ + + +
+ + diff --git a/test/unit/picture.js b/test/unit/picture.js new file mode 100644 index 0000000..b6e478d --- /dev/null +++ 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 new file mode 100644 index 0000000..f282e92 --- /dev/null +++ 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(); + } ); + +} );