Lightweight jQuery Content Lazy Loading Plugin - Recliner

Lightweight jQuery Content Lazy Loading Plugin - Recliner
File Size: 13.6 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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.