image-promise - npm Package Compare versions

Comparing version 5.0.0-1 to 5.0.0-2

dist/image-promise.common-js.js

@@ -1,2 +0,2 @@
-/*! npm.im/image-promise 5.0.0-1 */
+/*! npm.im/image-promise 5.0.0-2 */
 'use strict';
@@ -8,3 +8,3 @@
 	} else if (typeof image === 'string') {
-		// If image is a string, "convert" it to an <img>
+		/* Create a <img> from a string */
 		var src = image;
@@ -14,7 +14,18 @@ image = new Image();
 	} else if (image.length !== undefined) {
-		// If image is Array-like, treat as
-		// load(['1.jpg', '2.jpg'])
-		return Promise.all([].map.call(image, load));
+		/* Treat as multiple images */
+
+		// Momentarily ignore errors
+		var reflected = [].map.call(image, function (img) { return load(img).catch(function (err) { return err; }); });
+
+		return Promise.all(reflected).then(function (results) {
+			var loaded = results.filter(function (x) { return x.naturalWidth; });
+			if (loaded.length === results.length) {
+				return loaded;
+			}
+			return Promise.reject({
+				loaded: loaded,
+				errored: results.filter(function (x) { return !x.naturalWidth; })
+			});
+		});
 	} else if (image.tagName !== 'IMG') {
-		// If it's not an <img> tag, reject
 		return Promise.reject();
@@ -21,0 +32,0 @@ }

dist/image-promise.es-modules.js

@@ -1,2 +0,2 @@
-/*! npm.im/image-promise 5.0.0-1 */
+/*! npm.im/image-promise 5.0.0-2 */
 function load(image) {
@@ -6,3 +6,3 @@ if (!image) {
 	} else if (typeof image === 'string') {
-		// If image is a string, "convert" it to an <img>
+		/* Create a <img> from a string */
 		var src = image;
@@ -12,7 +12,18 @@ image = new Image();
 	} else if (image.length !== undefined) {
-		// If image is Array-like, treat as
-		// load(['1.jpg', '2.jpg'])
-		return Promise.all([].map.call(image, load));
+		/* Treat as multiple images */
+
+		// Momentarily ignore errors
+		var reflected = [].map.call(image, function (img) { return load(img).catch(function (err) { return err; }); });
+
+		return Promise.all(reflected).then(function (results) {
+			var loaded = results.filter(function (x) { return x.naturalWidth; });
+			if (loaded.length === results.length) {
+				return loaded;
+			}
+			return Promise.reject({
+				loaded: loaded,
+				errored: results.filter(function (x) { return !x.naturalWidth; })
+			});
+		});
 	} else if (image.tagName !== 'IMG') {
-		// If it's not an <img> tag, reject
 		return Promise.reject();
@@ -19,0 +30,0 @@ }

package.json

 {
   "name": "image-promise",
-  "version": "5.0.0-1",
-  "description": "Load an image and return a promise in the browser, in 0.3KB",
+  "version": "5.0.0-2",
+  "description": "Load one or more images, return a promise. Only 0.4KB, for the browser, no dependencies.",
   "license": "MIT",
@@ -18,3 +18,5 @@ "repository": "bfred-it/image-promise",
     "then",
-    "cache"
+    "cache",
+    "imagesloaded",
+    "vanilla"
   ],
@@ -21,0 +23,0 @@ "files": [

readme.md

@@ -10,3 +10,3 @@ # image-promise [![gzipped size][badge-gzip]](#no-link) [![Travis build status][badge-travis]][link-travis] [![npm version][badge-version]][link-npm] [![npm downloads][badge-downloads]][link-npm]
 
-> Load an image and return a promise in the browser, in 0.3KB, no dependencies
+> Load one or more images, return a promise. Only 0.4KB, for the browser, no dependencies.
 
@@ -50,20 +50,11 @@ It can be used in two ways:
 
-```js
-loadImage( '/cat.jpg' ); // one string
-loadImage( document.querySelector('img') ); // one element
-// Returns a Promise that resolves with an image (`<img>`)
+### One image
 
-loadImage( ['/cat.jpg', '/dog.png'] ); // Array of strings
-loadImage( document.querySelectorAll('img') ); // any Array-like list of elements
-// Returns a Promise that resolves with **an array of images.**
-```
+`loadImage(image)` will return a Promise that resolves when the image load, or fails when the image 
 
-The promises resolve when the provided `<img>`s are loaded.
+```js
+var image = 'cat.jpg';
+// var image = $('img')[0]; // it can also be an <img> element
 
-## Examples
-
-Load one image:
-
-```js
-loadImage('cat.jpg')
+loadImage(image)
 .then(function (img) {
@@ -77,13 +68,20 @@ ctx.drawImage(img, 0, 0, 10, 10);
 
-Load multiple images
+### Multiple images
 
+`image-promise` can load multiple images at a time
+
 ```js
-loadImage(['/cat.jpg', '/dog.png'])
+var images = ['cat.jpg', 'dog.jpg'];
+// var images = $('img'); // it can also be a jQuery object
+// var images = document.querySelectorAll('img'); // or a NodeList
+
+loadImage(images)
 .then(function (allImgs) {
 	console.log(allImgs.length, 'images loaded!', allImgs);
 })
-.catch(function (firstImageThatFailed) {
-	// it fails fast like Promise.all 
-	// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all#Promise.all_fail-fast_behaviour
+.catch(function (err) {
 	console.error('One or more images have failed to load :(');
+	console.error(err.errored);
+	console.info('But these loaded fine:');
+	console.info(err.loaded);
 });
@@ -90,0 +88,0 @@ ```

No alert changes

Improved metrics

Total package byte prevSize

6774

increased by9.75%

Lines of code

99

increased by22.22%

Worsened metrics

Number of lines in readme file

94

decreased by-2.08%

No dependency changes