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

Preview:

Description:

Layzr.js is a lightweight yet robust JavaScript library that delay 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:

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

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

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

<img src="placeholder.jpg" 
     data-layzr="normal.jpg" 
     data-layzr-retina="retina.jpg"
>

Enable the lazy load on all images.

var layzr = new Layzr({ 
 attr: 'data-layzr', 
 retinaAttr: 'data-layzr-retina', 
 callback: null 
});

Changelog:

01/10/2017

• Update