Multi-functional jQuery Content Lazy Load Plugin - Smartify
File Size: | 127 KB |
---|---|
Views Total: | 1258 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Smartify is a simple yet robust jQuery plugin that provides lazy load functionality on any DOM elements to improve the page load time.
Features:
- Supports images, iframes and even Ajax content.
- Allows to toggle CSS classes based on the scroll position on vertical page scrolling.
- Custom lazy load effect when the element is scrolled into view.
- Callback functions.
How to use it:
1. Load both jQuery library and the jQuery Smartify plugin into the document.
<script src="//code.jquery.com/jquery-2.2.0.min.js"></script> <script src="dist/jquery.smartify.min.js"></script>
2. Just call the function and we're ready to go.
$('.smartify').smartify();
3. Toggle the CSS classes of a specified element when it's scrolled into view.
<div class="smartify" data-remove-class="class-1" data-add-class="class-2"> … </div>
4. Delay the loading of a specified image until it's scrolled into view.
<img class="smartify" ng-src="1.jpg" ng-src-1-5x="[email protected]" ng-src-2x="[email protected]" ng-src-3x="[email protected]">
5. Load a href to a specified iframe element.
<a href="1.jpg" class="smartify" data-target="#target">Load href to iFrame</a> <iframe src="2.jpg" id="target" allowtransparency="true" height="500" width="100%"></iframe>
6. Load AJAX content into a specified container.
<a class="smartify" href="ajax-content.html" data-target="#target-container"> Load Ajax Content</a> <div id="target-container"></div>
7. Plugin's default settings
threshold: 0, failure_limit: 0, event: "scroll", effect: "fadeIn", container: window, src_attr: "ng-src", skip_invisible: true, placeholder: "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7", // Callback functions appear: $.noop, load: $.noop
Change log:
v1.0.0 (2016-04-01)
- Load image source when is/or being visible in viewport
- Load any <a> src to specified target or replace itself instead
- Toggle/Add/Replace any element css classes
- Includes new jQuery plugin Smartify Section to reduce system load
- And much, much more...
This awesome jQuery plugin is developed by vinaykrsharma. For more Advanced Usages, please check the demo page or visit the official website.