Loads images, background images, scripts, styles, iframes, videos and audios asynchronously (just 241 bytes).
MIT License
Loads images, background images, scripts, styles, iframes, videos and audios asynchronously (just 241 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 of querySelectorAll('[data-aload]')
.aload();
$ 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:
<script>
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}
</script>
data-aload
attributes instead of src
or href
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.// Onload
window.onload = function () {
aload();
};
<img data-aload="http://foobar.com/foo.png" width="400" height="300">
[data-aload] { background-image: none !important; }
.foo {
background: url('http://foobar.com/foobar.png');
}
<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 gulp
:
$ npm install gulp -g
Open your terminal and clone 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.
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.MIT license. Copyright © 2016.