Lightweight Retina Ready JS Image Lazy Load Library – Layzr.js

Preview:

Description:

Layzr.js is a lightweight yet robust JavaScript library that delays the loading of images until they’re scrolled into view.

More features:

• Small and easy to use.
• Supports retina images.
• Renders images with a subtle transition effect using requestAnimationFrame.
• Without any dependencies.

Basic usage:

1. Install and import the layzr.js

# NPM
$ npm i layzr.js

import Layzr from 'layzr.js'

2. Load the layzr.js library at the bottom of your document.

<script src="dist/layzr.js"></script>

3. Add images with placeholders and retina versions into your document as follow:

<img 
  data-normal="normal.jpg" 
  data-retina="retina.jpg" 
  data-srcset="small.jpg 320w, medium.jpg 768w, large.jpg 1024w" 
  />

4. Enable the lazy load on all images.

const instance = Layzr({
      // options here
})

5. Available options.

const instance = Layzr({
      normal: 'data-normal',
      retina: 'data-retina',
      srcset: 'data-srcset',
      threshold: 0
})

6. Events.

instance.on('src:before', (element) => {
  // do something
});
instance.on('src:after', (element) => {
  // do something
})

7. API methods.

// add scroll and resize event handlers
instance.handlers(true);
// remove scroll and resize event handlers
instance.handlers(false);
// check if elements are in the viewport.
instance.check();
// update the instance
instance.update();

Changelog:

10/24/2022

• Updated doc