lousy-load

Lousy Load

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.