lazy.js

A tiny and dependency-free JavaScript library for lazy loading resources.

What kind of resources can I load?

Images
Scripts
Styles
Iframes
Videos
Audios
Background images.

How-to

You should add the library (inline) into your HTML file:

<script>
    /*! lazy.js v0.0.1 Released under the MIT license. */!function(a){"use strict";function b(a){a=a||document.querySelectorAll("[data-lazy]");var b,c,d,e=0;for(void 0===a.length&&(a=[a]),b=a.length,e;b>e;e+=1)c=a[e],d=c.getAttribute("data-lazy"),""!==d&&(c["LINK"!==c.tagName?"src":"href"]=d),c.removeAttribute("data-lazy")}a.lazy=b}(this);
</script>

Images

<img data-lazy="http://foo.bar.com/foobar.png" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" width="400" height="300">

window.onload = function () {
    lazy();
};

Script

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

window.onload = function () {
    lazy();
};

Style

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

window.onload = function () {
    lazy();
};

Iframe

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

window.onload = function () {
    lazy();
};

Video

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

window.onload = function () {
    lazy();
};

Audio

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

window.onload = function () {
    lazy();
};

Background Images

/* You must add the following CSS snippet */
[data-lazy] {
    background-image: none !important;
}

/* Your own CSS */
.box {
    width: 400px;
    height: 300px;
    background: url('http://foobar.com/foobar.png') no-repeat center center;
}

<div data-lazy class="box"></div>

window.onload = function () {
    lazy();
};

Progressive Enhancement is still important

For example, to show images when JavaScript is not enabled you should include the images inside <noscript>.

<img data-lazy="foo.jpg" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" width="400" height="300">
<noscript>
    <img src="foo.jpg" width="400" height="300">
</noscript>

API

lazy([nodes])

Loads resources asynchronously on-demand.

nodes (optional): [NodeList] - An node element or a collection of node elements. Default: the result of querySelectorAll('[data-lazy]').

<img data-lazy="http://foo.bar.com/foo.png" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" width="400" height="300">
<img data-lazy="http://foo.bar.com/bar.png" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" width="400" height="300">

<img data-lazy="http://foo.bar.com/foobar.png" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" width="400" height="300" id="onscroll">

window.onload = function () {
    lazy();
};

window.onscroll = function () {
    var ondemand = document.getElementById('onscroll');

    lazy(ondemand);
};

Development setup

Install Git and NodeJS.

Open your terminal and clone mercadolibre/lazy.js by running:

 $ git clone [email protected]:mercadolibre/lazy.js.git

Now go to the project's folder:
```
 $ cd lazy.js
```
Install its dependencies:
```
 $ npm install
```
Install grunt-cli:
```
 $ npm install grunt-cli -g
```
Develop! :)

## Grunt tasks

grunt dev: Builds a development version.
grunt test: Runs Jasmine tests.
grunt dist: Creates a distrubution version of lazy.js. You should find two files: .dist/lazy.js and .dist/lazy.min.js.

Contribute

Please read through our code style guide:

JavaScript

## Maintained by

Guille Paz ([email protected])

## Credits

## License Licensed under the MIT license.

regou / lazy.js Goto Github PK

lazy.js's Introduction