Layzr.js is a lightweight yet powerful JavaScript library that delays the loading of images until they are passed to view.

image loadinglazy, lazy load images example, lazy loading javascript on scroll, loadinglazy background image

More advantages:

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

Vue.js Component For Lazyloading YouTube Videos

How to make use of it:

1. Load the Layzr.js library of the document.

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

2. Add images with placeholders and retina versions to your document as follows:

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

3. Enable lazy loading on all photos.

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

Lightweight Retina Ready JS Image Lazy Load Library, Layzr.js Plugin/Github

See Demo And Download

Official Website(callmecavs): Click Here

This superior jQuery/javascript plugin is developed by callmecavs. For extra Advanced Usages, please go to the official website.