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

Category: Image , Javascript , Loading , Recommended | October 24, 2022
Author:callmecavs
Views Total:55 views
Official Page:Go to website
Last Update:October 24, 2022
License:MIT

Preview:

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

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

You Might Be Interested In:


Leave a Reply