Skip to content

Loads images, background images, scripts, styles, iframes, videos and audios asynchronously (just 241 bytes).

License

Notifications You must be signed in to change notification settings

pazguille/aload

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

83 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

aload.js

NPM version License Build status Coverage Status Dependency status devDependency status downloads

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]').
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:

<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>

Usage

  1. You should use 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.
  1. Now, you can start to load your images asynchronously!
// Onload
window.onload = function () {
  aload();
};

You can load everything asynchronously.

  • images
  • background images
  • scripts
  • styles
  • iframes
  • videos
  • audios

IMG

<img data-aload="http://foobar.com/foo.png" width="400" height="300">

Backgrounds

  1. You must add the following CSS snippet.
[data-aload] { background-image: none !important; }
  1. Your own CSS.
.foo {
  background: url('http://foobar.com/foobar.png');
}
  1. In your HTML.
<div data-aload class="foo"></div>

SCRIPT

<script data-aload="http://foobar.com/foo.js"></script>

LINK (styles)

<link data-aload="http://foobar.com/foo.css" rel="stylesheet">

IFRAME

<iframe data-aload="http://foobar.com" src="javascript:false"></iframe>

VIDEO

<video data-aload="http://foobar.com/bar.mp4" controls></video>

AUDIO

<audio data-aload="http://foobar.com/foo.mp3" controls></audio>

Progressive Enhancement

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>

Development

  1. Install Git and NodeJS.

  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 ❤️ by

License

MIT license. Copyright © 2016.

About

Loads images, background images, scripts, styles, iframes, videos and audios asynchronously (just 241 bytes).

Resources

License

Stars

Watchers

Forks

Packages

No packages published