image-promise - npm Package Compare versions

Comparing version 1.0.4 to 2.0.0

dist/image-promise.common-js.js

 'use strict';
 
-// let images = ['a.jpg','b.jpg'];
-// Promise.all(images.map(loadImage))
-
 var EMPTY_IMAGE = 'data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=';
-var loaded = {};
 
 function load(src) {
-	if (!loaded[src]) {
-		(function () {
-			var image = new Image();
-			loaded[src] = new Promise(function (resolve, reject) {
-				image.addEventListener('load', function () {
-					resolve(image);
-				});
-				image.addEventListener('error', reject);
-				image.src = src;
+	// if more than one argument, treat as
+	// load('1.jpg', '2.jpg')
+	if (typeof arguments[1] === 'string') {
+		src = Array.apply(null, arguments);
+	}
 
-				if (image.complete) {
-					setTimeout(resolve, 0, image);
-				}
-			});
-			loaded[src].image = image;
-		})();
+	// if first argument is an array, treat as
+	// load(['1.jpg', '2.jpg'])
+	if (src.map) {
+		return Promise.all(src.map(load));
 	}
-	return loaded[src];
+
+	var image = new Image(); // putting this outside the condition avoids an IIFE in babel
+	if (!load[src]) {
+		load[src] = new Promise(function (resolve, reject) {
+			image.addEventListener('load', resolve.bind(null, image));
+			image.addEventListener('error', reject.bind(null, image));
+			image.src = src;
+
+			if (image.complete) {
+				resolve(image);
+			}
+		});
+		load[src].image = image;
+	}
+	return load[src];
 }
 
 load.unload = function (src) {
-	if (loaded[src]) {
-		loaded[src].then(function (image) {
+	// if more than one argument, treat as
+	// load('1.jpg', '2.jpg')
+	if (typeof arguments[1] === 'string') {
+		src = Array.apply(null, arguments);
+	}
+
+	// if first argument is an array, treat as
+	// load(['1.jpg', '2.jpg'])
+	if (src.map) {
+		return Promise.all(src.map(load.unload));
+	}
+
+	if (load[src]) {
+		return load[src].catch(function () {}).then(function (image) {
 			// GC, http://www.fngtps.com/2010/mobile-safari-image-resource-limit-workaround/
 			image.src = EMPTY_IMAGE;
-			delete loaded[src];
+			delete load[src];
 		});
@@ -37,0 +53,0 @@ }

dist/image-promise.es-modules.js

@@ -1,34 +0,50 @@
-// let images = ['a.jpg','b.jpg'];
-// Promise.all(images.map(loadImage))
-
 var EMPTY_IMAGE = 'data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=';
-var loaded = {};
 
 function load(src) {
-	if (!loaded[src]) {
-		(function () {
-			var image = new Image();
-			loaded[src] = new Promise(function (resolve, reject) {
-				image.addEventListener('load', function () {
-					resolve(image);
-				});
-				image.addEventListener('error', reject);
-				image.src = src;
+	// if more than one argument, treat as
+	// load('1.jpg', '2.jpg')
+	if (typeof arguments[1] === 'string') {
+		src = Array.apply(null, arguments);
+	}
 
-				if (image.complete) {
-					setTimeout(resolve, 0, image);
-				}
-			});
-			loaded[src].image = image;
-		})();
+	// if first argument is an array, treat as
+	// load(['1.jpg', '2.jpg'])
+	if (src.map) {
+		return Promise.all(src.map(load));
 	}
-	return loaded[src];
+
+	var image = new Image(); // putting this outside the condition avoids an IIFE in babel
+	if (!load[src]) {
+		load[src] = new Promise(function (resolve, reject) {
+			image.addEventListener('load', resolve.bind(null, image));
+			image.addEventListener('error', reject.bind(null, image));
+			image.src = src;
+
+			if (image.complete) {
+				resolve(image);
+			}
+		});
+		load[src].image = image;
+	}
+	return load[src];
 }
 
 load.unload = function (src) {
-	if (loaded[src]) {
-		loaded[src].then(function (image) {
+	// if more than one argument, treat as
+	// load('1.jpg', '2.jpg')
+	if (typeof arguments[1] === 'string') {
+		src = Array.apply(null, arguments);
+	}
+
+	// if first argument is an array, treat as
+	// load(['1.jpg', '2.jpg'])
+	if (src.map) {
+		return Promise.all(src.map(load.unload));
+	}
+
+	if (load[src]) {
+		return load[src].catch(function () {}).then(function (image) {
 			// GC, http://www.fngtps.com/2010/mobile-safari-image-resource-limit-workaround/
 			image.src = EMPTY_IMAGE;
-			delete loaded[src];
+			delete load[src];
 		});
@@ -35,0 +51,0 @@ }

package.json

 {
   "name": "image-promise",
-  "version": "1.0.4",
-  "description": "Load an image and return a promise in the browser, in 0.4KB",
+  "version": "2.0.0",
+  "description": "Load an image and return a promise in the browser, in 0.3KB",
   "license": "MIT",
@@ -53,3 +53,6 @@ "repository": "bfred-it/image-promise",
       "browser"
-    ]
+    ],
+    "rules": {
+      "prefer-spread": 0
+    }
   },
@@ -56,0 +59,0 @@ "bugs": {

readme.md

@@ -22,3 +22,3 @@ # image-promise
 
-It uses the ES2015 `window.Promise`, so if you need to support older browsers you need a polyfill.
+It uses the ES2015 `window.Promise`, so if you need to support [older browsers](http://caniuse.com/#feat=promises) (IE<=11) you need a polyfill.
 
@@ -30,5 +30,7 @@ ## Usage
 ```js
-loadImage('img.jpg').then(function (img) {
+loadImage('img.jpg')
+.then(function (img) {
 	console.log('Image loaded!', img);
-}).catch(function () {
+})
+.catch(function () {
 	console.error('Image failed to load :(');
@@ -48,26 +50,17 @@ });
 
-`image-promise` only works for one image at a time. Here are a couple ways to load more than one image and wait for all of them:
+`image-promise` also accepts an array of URLs **or** multiple parameters:
 
 ```js
-Promise.all([
-	loadImage('url.jpg'),
-	loadImage('url2.jpg')
-]).then(function (imgs) {
-	console.log(imgs.length, 'images loaded!', imgs);
-}).catch(function () {
-	console.error('One or more images have failed to load :(');
-});
+loadImage(['url.jpg','url2.jpg']);
+loadImage('url.jpg','url2.jpg');
 ```
 
-Or, if you have an array of urls:
+The promise fulfills with the array of `<img>`s:
 
 ```js
-var arrayOfUrls = [
-	'url.jpg',
-	'url2.jpg',
-	...
-]
-Promise.all( arrayOfUrls.map(loadImage) ).then(function (imgs) {
-	console.log(imgs.length, 'images loaded!', imgs);
-}).catch(function () {
+loadImage('url.jpg','url2.jpg')
+.then(function (allImgs) {
+	console.log(allImgs.length, 'images loaded!', allImgs);
+})
+.catch(function (allImgs) {
 	console.error('One or more images have failed to load :(');
@@ -74,0 +67,0 @@ });

No alert changes

Improved metrics

Total package byte prevSize

6535

increased by15.24%

Lines of code

93

increased by38.81%

Worsened metrics

Number of lines in readme file

75

decreased by-8.54%

No dependency changes