Skip to content

vin-ai/jquery.smartify.js

Repository files navigation

jQuery Smartify

jQuery Smartify boosts web application load times and lazy loads images, calls Ajax, plays with css classes in/on demand, while element is/or being visible in device viewport.

It has full capability of jQuery Lazyload, but with more elements coverage and advanced. This doesn't only work for <img>, have capabality to smartify any elements!

Plugin is inspired by jQuery Lazyload created by Mika Tuupola.

Features, Benefits & Plans

  • Boost your web application load time.
  • Multiple Elements Support
  • Dynamically load contents via Ajax call. e.g: Load each section on just before becoming visible.
  • Infinite load items, such as products to sale. Best for e-commerce websites.
  • Load images when visible in viewport.
  • Load dynamic images for different DPI supports. Such as 3x for High Res(Retina) display.
  • Toggle, Add or Remove element classes.
  • Or just call User defined callback function.
  • HTML5 History API (wip)

Getting Started

Preferred method:

  • Install with Bower: $ bower install smartify

Other methods:

Note: jquery.smartify.js have a dependency on jQuery

Quick Start

<!-- Elements to Smartify -->
<img class="smartify" sm-src="/static/path/to/img.png">

...

<!-- JavaScript before </body> -->
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="dist/jquery.smartify.min.js"></script>
<script>
jQuery(function($) {
  $('.smartify').smartify(); // "smartify"
});
</script>

Examples

For some working examples of Smartify, visit the examples page.

Documentation

Docs

Browser Support

Manually Tested Platforms on Linux and Mac OS X only ()

  • Chrome (Linux/Mac OS X/Android 5.1+)
  • Firefox 40+ (Linux/Mac OS X/Android 5.1+)
  • Safari 5+ (Mac OS X)
  • Opera 11+ (Linux/Mac OS X/Android 5.1+)

Issues

Discovered a bug? Please create an issue here on GitHub!

https://github.com/vinaykrsharma/jquery.smartify/issues

Versioning

For transparency and insight into our release cycle, releases will be numbered with the following format:

<major>.<minor>.<patch>

And constructed with the following guidelines:

  • Breaking backwards compatibility bumps the major
  • New additions without breaking backwards compatibility bumps the minor
  • Bug fixes and misc changes bump the patch

For more information on semantic versioning, please visit http://semver.org/.