https://github.com/pazguille/async-img

[DEPRECATED: You should use https://github.com/pazguille/aload] Asynchronous Image Loader.
https://github.com/pazguille/async-img

Last synced: about 1 month ago
JSON representation

[DEPRECATED: You should use https://github.com/pazguille/aload] Asynchronous Image Loader.

• Host: GitHub
• URL: https://github.com/pazguille/async-img
• Owner: pazguille
• Created: 2013-06-12T11:43:15.000Z (over 11 years ago)
• Default Branch: master
• Last Pushed: 2015-07-24T11:44:46.000Z (over 9 years ago)
• Last Synced: 2024-08-01T22:54:05.824Z (3 months ago)
• Language: JavaScript
• Homepage: http://pazguille.github.io/async-img/
• Size: 266 KB
• Stars: 27
• Watchers: 4
• Forks: 3
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: History.md

Awesome Lists containing this project

README

        
# async-img [DEPRECATED]

> You should use [aload](https://github.com/pazguille/aload) for an updated and mantained version.

Asynchronous Image Loader.

Yes, I know there are a lot of libraries, modules or plugins to load images asynchronously. But, most of them have been built with jQuery as dependency. I really love jQuery, but I think there are a lot of things we can do without jQuery.

This is the reason why I built this using [Vanilla JS](http://vanilla-js.com) :)

## Installation

    $ component install pazguille/async-img

See: [https://github.com/component/component](https://github.com/component/component)

### Standalone

Also, you can use the standalone version:

```html

```

## How-to

First, you should use the following HTML code on your images:

```html



```

- `data-async` - URL of the image.

- `src` - Temporary URL of the image (optional).

- `width` - Set the width of the image (recommended).

- `height` - Set the height of the image (recommended).

Then, require the `async-img` component (avoid this step if you use the standalone version):

```js

var asyncImg = require('async-img');

```

Now, you can start to load your images asynchronously!

```js

// Onload

window.onload = function () {

    asyncImg();

};

```

### Progressive Enhancement

If you are a front-end developer you must know about [Progressive enhancement](http://alistapart.com/article/understandingprogressiveenhancement).

Progressive enhancement focuses on the content. Images are content, and the content must be showed without JavaScript and images too.

The `.no-js` class should be removed by JavaScript, so you can display/hide things using CSS if JavaScript is disabled.

```css

.no-js [data-async] {

    display: none;

}

```

To show images when JavaScript is not enabled you should include the images inside `` tag.

```html



    

```

## API

### asyncImg([imgs])

Load images asynchronously.

- `imgs` {NodeList} [optional] - A NodeList of images. By default, its value is the result of `querySelectorAll('[data-async]')` CSS selector.

```js

asyncImg();

```

### asyncImg.preload(imgs)

Preload the given array of images.

- `imgs` {array} - The given array.

```js

asyncImg.preload([

    'image1.jpg',

    'image2.jpg',

    'image3.jpg'

]);

```

## Contact

- Guille Paz (Frontend developer - JavaScript developer | Web standards lover)

- E-mail: [[email protected]](mailto:[email protected])

- Twitter: [@pazguille](http://twitter.com/pazguille)

- Web: [http://pazguille.me](http://pazguille.me)

## License

Copyright (c) 2013 [@pazguille](http://twitter.com/pazguille) Licensed under the MIT license.