Skip to content

Commit

Permalink
Readme: updated
Browse files Browse the repository at this point in the history
  • Loading branch information
bfred-it committed Jun 20, 2016
1 parent b9b4338 commit 0cd2d3a
Show file tree
Hide file tree
Showing 2 changed files with 15 additions and 22 deletions.
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "image-promise",
"version": "1.0.4",
"description": "Load an image and return a promise in the browser, in 0.4KB",
"description": "Load an image and return a promise in the browser, in 0.3KB",
"license": "MIT",
"repository": "bfred-it/image-promise",
"author": "Federico Brigante <bfred-it@users.noreply.github.com> (twitter.com/bfred_it)",
Expand Down
35 changes: 14 additions & 21 deletions readme.md
Original file line number Diff line number Diff line change
Expand Up @@ -19,16 +19,18 @@ If you don't use node/babel, include this:
<script src="dist/image-promise.browser.js"></script>
```

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.

## Usage

You can load a single image from its URL:

```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 :(');
});
```
Expand All @@ -43,30 +45,21 @@ loadImage.unload('img.jpg');

### Load multiple images

`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 :(');
});
```
Expand Down

0 comments on commit 0cd2d3a

Please sign in to comment.