Lightweight jQuery Content Lazy Loading Plugin - Recliner

File Size: 13.6 KB
Views Total: 3993
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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="//"></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.


4. Available options to customize the lazy load function.


// 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:


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


  • Add load handling for extra methods


  • Handle document print events


  • v0.2.2


  • 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.