Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/pazguille/aload
Loads images, background images, scripts, styles, iframes, videos and audios asynchronously (just 241 bytes).
https://github.com/pazguille/aload
Last synced: 12 days ago
JSON representation
Loads images, background images, scripts, styles, iframes, videos and audios asynchronously (just 241 bytes).
- Host: GitHub
- URL: https://github.com/pazguille/aload
- Owner: pazguille
- License: mit
- Created: 2013-07-02T11:56:21.000Z (over 11 years ago)
- Default Branch: master
- Last Pushed: 2020-05-23T11:44:13.000Z (over 4 years ago)
- Last Synced: 2024-10-14T12:33:46.160Z (about 1 month ago)
- Language: JavaScript
- Homepage: http://pazguille.github.io/aload/
- Size: 3.52 MB
- Stars: 409
- Watchers: 20
- Forks: 44
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# aload.js
[![NPM version][npm-image]][npm-link] [![License][lic-image]][npm-link] [![Build status][travis-image]][travis-link] [![Coverage Status][coverage-image]][coverage-link] [![Dependency status][deps-image]][deps-link] [![devDependency status][devdeps-image]][devdeps-link] [![downloads][dt-image]][npm-link]
> Loads images, background images, scripts, styles, iframes, videos and audios asynchronously (just 241 bytes).
## API
### aload([nodeList])
Loads images, background images, scripts, styles, iframes, videos and audios asynchronously.
- `nodeList` {NodeList} [optional] - A NodeList of elements. By default, it is the result of `querySelectorAll('[data-aload]')`.
```js
aload();
```
## Installation
$ npm install aload
$ bower install aload
*Note:* I recommend to use `aload` inline in your HTML.
As standalone just include `aload` function (just 241 bytes) inline into your HTML file:
```html
function aload(t){"use strict";var e="data-aload";return t=t||window.document.querySelectorAll("["+e+"]"),void 0===t.length&&(t=[t]),[].forEach.call(t,function(t){t["LINK"!==t.tagName?"src":"href"]=t.getAttribute(e),t.removeAttribute(e)}),t}
```
## Usage
1. You should use `data-aload` attributes instead of `src` or `href` in your HTML tags (an image for example):
```html
![]()
```
- `data-aload` - URL of the source.
2. Now, you can start to load your images asynchronously!
```js
// Onload
window.onload = function () {
aload();
};
```
### You can load everything asynchronously.
- images
- background images
- scripts
- styles
- iframes
- videos
- audios
#### IMG
```html
![]()
```
### Backgrounds
1. You must add the following CSS snippet.
```css
[data-aload] { background-image: none !important; }
```
2. Your own CSS.
```css
.foo {
background: url('http://foobar.com/foobar.png');
}
```
3. In your HTML.
```html
```
#### SCRIPT
```html
```
#### LINK (styles)
```html
```
#### IFRAME
```html
```
#### VIDEO
```html
```
#### AUDIO
```html
```
### 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 and it must be showed without JavaScript.
For example, to show images when JavaScript is not enabled you should include the images inside `` tag.
```html
```
## Development
1. Install [Git](http://git-scm.com/) and [NodeJS](http://nodejs.org/).
2. Install `gulp`:
$ npm install gulp -g
3. Open your terminal and clone `aload` by running:
$ git clone [email protected]:pazguille/aload.git
4. Go to aload's folder:
$ cd aload
5. Move to develop branch:
$ git checkout develop
6. Install its dependencies:
$ npm install
7. Code, code code!
8. Send pull requests.
### NPM tasks
- `npm run dist`: Creates a distribution version of `aload`. You should find two files: `./dist/aload.js` and `./dist/aload.min.js`.
- `npm test`: Runs mocha tests.
## With :heart: by
- Guille Paz (Front-end developer | Web standards lover)
- E-mail: [[email protected]](mailto:[email protected])
- Twitter: [@pazguille](http://twitter.com/pazguille)
- Web: [https://pazguille.me](https://pazguille.me)
## License
MIT license. Copyright © 2016.
[npm-image]: https://img.shields.io/npm/v/aload.svg
[lic-image]: https://img.shields.io/npm/l/aload.svg
[npm-link]: https://npmjs.org/package/aload
[travis-image]: https://img.shields.io/travis/pazguille/aload.svg
[travis-link]: https://travis-ci.org/pazguille/aload
[deps-image]: https://img.shields.io/david/pazguille/aload.svg
[deps-link]: https://david-dm.org/pazguille/aload
[devdeps-image]: https://img.shields.io/david/dev/pazguille/aload.svg
[devdeps-link]: https://david-dm.org/pazguille/aload#info=devDependencies
[dt-image]: https://img.shields.io/npm/dt/aload.svg
[coverage-image]: https://img.shields.io/coveralls/pazguille/aload.svg
[coverage-link]: https://coveralls.io/github/pazguille/aload