Loads images, background images, scripts, styles, iframes, videos and audios asynchronously (just 314 bytes).
Loads images, background images, scripts, styles, iframes, videos and audios asynchronously.
nodeList
{NodeList} [optional] - A NodeList of elements. By default, it is the result ofquerySelectorAll('[data-aload]')
.
aload();
- You should add
aload
function (just 314 bytes) inline into your HTML file:
<script>
function aload(a){"use strict";a=a||window.document.querySelectorAll("[data-aload]"),void 0===a.length&&(a=[a]);var b,c=0,d=a.length;for(c;d>c;c+=1)b=a[c],b["LINK"!==b.tagName?"src":"href"]=b.getAttribute("data-aload"),b.removeAttribute("data-aload");return a}
</script>
- You should use
data-aload
attributes instead ofsrc
orhref
in your HTML tags (an image for example):
<img data-aload="http://foobar.com/foo.png" width="400" height="300">
data-aload
- URL of the source.
- Now, you can start to load your images asynchronously!
// Onload
window.onload = function () {
aload();
};
- images
- background images
- scripts
- styles
- iframes
- videos
- audios
<img data-aload="http://foobar.com/foo.png" width="400" height="300">
- You must add the following CSS snippet.
[data-aload] { background-image: none !important; }
- Your own CSS.
.foo {
background: url('http://foobar.com/foobar.png');
}
- In your HTML.
<div data-aload class="foo"></div>
<script data-aload="http://foobar.com/foo.js"></script>
<link data-aload="http://foobar.com/foo.css" rel="stylesheet">
<iframe data-aload="http://foobar.com" src="javascript:false"></iframe>
<video data-aload="http://foobar.com/bar.mp4" controls></video>
<audio data-aload="http://foobar.com/foo.mp3" controls></audio>
If you are a front-end developer you must know about Progressive enhancement. 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 <noscript>
tag.
<img data-aload="http://foobar.com/foo.png"
src="data:image/gif;base64,R0lGODlhAQABAIAAAMLCwgAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw=="
width="400"
height="300">
<noscript>
<img src="http://foobar.com/foo.png" width="400" height="300">
</noscript>
-
Install
grunt-cli
:$ npm install grunt-cli -g
-
Open your terminal and clone
pazguille/aload
by running:$ git clone [email protected]:pazguille/aload.git
-
Go to aload's folder:
$ cd aload
-
Move to develop branch:
$ git checkout develop
-
Install its dependencies:
$ npm install
-
Code, code code!
-
Send pull requests.
grunt test
: Runs Jasmine tests.grunt dist
: Creates a distrubution version ofaload
. You should find two files:./dist/aload.js
and./dist/aload.min.js
.
## Maintained by
- Guille Paz (Front-end developer | Web standards lover)
- E-mail: [email protected]
- Twitter: @pazguille
- Web: http://pazguille.me
Licensed under the MIT license.
Copyright (c) 2014 @pazguille.