Lightweight jQuery Content Lazy Loading Plugin - Recliner
File Size: | 13.6 KB |
---|---|
Views Total: | 3981 |
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.