Lightweight jQuery Content Lazy Loading Plugin - Recliner

Recliner is a lightweight JQuery plugin that delays the loading of images or other dynamic content (e.g. iframes, ajax content) until they're about to come into view. Helps you enhance website performance and improve page load times.

How to use it:

1. Load the jquery.recliner.js script after loading jQuery JavaScript library.

<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="recliner.js"></script>

2. Lazy load your images or dynamic content using Html5 data attribute. Just Markup your images (iframes, ajax content) putting the source inside the data-src attribute. 

<img class="lazy" data-src="demo.jpg">
<div id="ajax" class="lazy" data-src="ajaxcontent.html">

3. Initialize the plugin with default options.

$('.lazy').recliner();

4. Available options to customize the lazy load function.

$('.lazy').recliner({

// lazy element selector
attrib: "data-src", 

// milisecond interval at which to process events
throttle: 300,

// scroll distance from element before its loaded
threshold: 100, 

// handle ajax loaded elements
live: false     

});

Change log:

2017-07-05

• add (probably)complete elements with [src] list

2016-02-08

• Add load handling for extra methods

2016-01-01

• Handle document print events

2015-12-12

• v0.2.2

2015-10-14

• Use innerHeight to fix misreported window height when doctype is not defined

---

This awesome jQuery plugin is developed by sourcey. For more Advanced Usages, please check the demo page or visit the official website.