lousy-load
v1.0.1
Published
JavaScript lazy load plugin with responsive image support
Downloads
1
Maintainers
Readme
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.