Multi-functional jQuery Content Lazy Load Plugin - Smartify

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

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.