Need help with aload?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

pazguille
403 Stars 45 Forks MIT License 83 Commits 11 Opened issues

Description

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

Services available

!
?

Need anything else?

Contributors list

# 4,616
repl
HTML
CSS
Node.js
70 commits
# 176
nextjs
postman...
graphql...
angular...
3 commits
# 15,933
CSS
TypeScr...
React
menu-na...
1 commit
# 117,868
JavaScr...
HTML
svg-spr...
asset-p...
1 commit

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:

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

 tag.
  
  
      
  

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

License

MIT license. Copyright © 2016.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.