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

Category: Image , Javascript , Loading , Recommended | January 10, 2017
Author: callmecavs
Views Total: 2,390
Official Page: Go to website
Last Update: January 10, 2017
License: MIT

Preview:

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

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

You Might Be Interested In:


Leave a Reply