Pure JavaScript Library For Lazy Loading Images – lazyload.js

Category: Javascript , Loading , Recommended | July 14, 2018
Author: verlok
Views Total: 1,739
Official Page: Go to website
Last Update: July 14, 2018
License: MIT

Preview:

Pure JavaScript Library For Lazy Loading Images – lazyload.js

Description:

lazyload.js is a stand-alone JavaScript library for lazy loading images without any dependencies. It supports the srcset attribute and with and takes best advantage from the progressive JPEG image format.

Basic Usage:

Load the lazyload.js JavaScript library at the end of your document.

<script src="path/to/lazyload.js"></script>

Insert your images into the document using data-original attribute instead of src.

<img alt="Alt 1" data-src="1.jpg" width="200" height="200">
<img alt="Alt 2" data-src="2.jpg" width="200" height="200">
<img alt="Alt 3" data-src="3.jpg" width="200" height="200">
...

Initialize the lazy load functionality on your images with one JS call.

new LazyLoad();

Available options with default values.

// image selector
elements_selector: "img",

// parent container
container: window,

// the distance out of the viewport
threshold: 300,

// data-src
data_src: "src",

// data-srcset
data_srcset: "srcset",

// date-sizes
data_sizes: "sizes",

// default classes
class_loading: "loading",
class_loaded: "loaded",
class_error: "error",

// callbacks
callback_load: null,
callback_set: null,
callback_set: null,
callback_enter: null

API methods.

// update the LazyLoad
update();

// load all images
loadAll()

// destroy the LazyLoad
destroy()

Changelog:

07/14/2018

  • v10.9: Added the ability to lazily set the sizes attribute via a data-sizes attribute.

06/24/2018

  • v10.8: Added a public loadAll method to force loading all the images

05/31/2018

  • v10.5.2: Added a security check on lazy elements’ parents.

Leave a Reply