aload.js

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

querySelectorAll('[data-aload]')

aload();

Installation

$ npm install aload

$ bower install aload

Note: I recommend to use

aload

As standalone just include

aload

Usage

1. You should use

   data-aload

   attributes instead of

   src

   or

   href

   in your HTML tags (an image for example):

• 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

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.

SCRIPT

LINK (styles)

IFRAME

VIDEO

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

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 :heart: by

• Guille Paz (Front-end developer | Web standards lover)
• E-mail: [email protected]
• Twitter: @pazguille
• Web: https://pazguille.me

License

MIT license. Copyright © 2016.