No description, website, or topics provided.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo
dist
resources
test
.babelrc
.gitignore
.npmignore
.travis.yml
LICENSE
README.md
gulpfile.js
lousy-load.js
package-lock.json
package.json
yarn.lock

README.md

Lousy Load

Build Status

Lousy Load is a JavaScript lazy loading plugin for images. End of speech.

Install

npm install --save lousy-load # npm
yarn add lousy-load           # yarn

Or download the latest release

Basic Examples

Vanilla JavaScript

<img data-src="path/to/image.jpg" width="400" height="300">
        
<script src="lousy-load.min.js"></script>
<script>
    var ll = new lousyLoad(document.body);
</script>

jQuery

<img data-src="path/to/image.jpg" width="400" height="300">
        
<script src="lousy-load.min.js"></script>
<script>
    $('body').lousyLoad();
</script>

Advanced Example

<img 
    class="ll-image"
    data-src="path/to/image.jpg"
     width="400"
     height="300">

<img 
    data-nowrap
    class="ll-image"
    data-src="path/to/image2.jpg"
    width="400"
    height="300">
        
<script src="lousy-load.min.js"></script>
<script>
    var ll = new lousyLoad(document.body, {
        selector : '.ll-image',
        threshold : 100,
    });
</script>

Usage

Syntax

Vanilla JS

new lousyLoad([container[, options]])

jQuery

$(container).lousyLoad([options]);

container

container is the DOM element that contains the images you want to lazy load.

options

threshold number - Number of pixels above and below the viewport Lousy Load will check for images.

selector string - Selector Lousy Load will use to populate list of lazy loaded images.

wrapElement boolean - If true images will be wrapped in a span tag. Useful for loading transitions.