Author: | callmecavs |
---|---|
Views Total: | 95 views |
Official Page: | Go to website |
Last Update: | October 24, 2022 |
License: | MIT |
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