jQuery Plugin For Lazy Loading of Images/Videos - Lazy Load XT

jQuery Plugin For Lazy Loading of Images/Videos - Lazy Load XT
File Size: 497 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Lazy Load XT is a mobile-oriented, fast and extensible jQuery plugin for lazy loading of images, videos and other media.

Features:

  • Works with jQuery Mobile framework.
  • Ajax content supported.
  • Lazy loading with fade-in and spinner effects.
  • Supports responsive images for different pixel densities (Retina).
  • Mega images supported.
  • Works with Zepto library.

You might also be interested in:

Basic Usage:

1. Include the jQuery Lazy Load XT plugin after jQuery javascript library.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="jquery.lazyloadxt.js"></script>

2. Insert images in your page using data-src attribute instead of src. Using noscript tag for disabled JavaScript support.

<img data-src="1.jpg" width="300" height="200" class="demo" />
<noscript><img src="1.jpg" width="300" height="200" /></noscript>

3. Options and defaults.

// auto initialize in $.ready
autoInit: true, 

// selector for lazyloading elements
selector: 'img[data-src]', 

// blank image
blankImage: 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7',

// interval (ms) for changes check
throttle: 99, 

// force auto load all images
forceLoad: forceLoad, 

// check AJAX-loaded content in jQueryMobile
loadEvent: 'pageshow', 

// page-modified events
updateEvent: 'load orientationchange resize scroll touchmove focus', 

// force loading of all elements
forceEvent: 'lazyloadall', 

// init handler
oninit: {removeClass: 'lazy'}, 

// start loading handler
onshow: {addClass: classLazyHidden}, 

// load success handler
onload: {removeClass: classLazyHidden, addClass: 'lazy-loaded'}, 

// error handler
onerror: {removeClass: classLazyHidden}, 

// check duplicates
checkDuplicates: true

4. Element options.

elementOptions = {

  // attribute containing actual src path
  srcAttr: 'data-src',

  // expand visible page area in horizontal direction by specified amount of pixels 
  edgeX: 0,

  // expand visible page area (viewport) in vertical direction by specified amount of pixels
  edgeY: 0,

  // added for compatibility with original Lazy Load Plugin by Mika Tuupola
  visibleOnly: true
},

About author:

Author: RESS.io

Website: http://ress.io/

Documentation: https://github.com/ressio/lazy-load-xt#readme

Change logs:

1.1.0 (2016-01-12)

  • update

1.0.6 (2014-11-19)

  • fix work of srcset addons in IE6-8

1.0.5 (2014-06-06)

  • fix picture and script addons

1.0.4 (2014-05-30)

  • fix calls to each() method

1.0.3 (2014-05-28)

  • add support of DOMtastic
  • trigger update on browser's tab activation

1.0.2 (2014-03-06)

  • fix work in jQuery Mobile 1.4

1.0.1 (2014-02-17)

  • fix triggering lazyload and lazyerror events in scrset and picture addons

1.0.0 (2014-01-16)

  • partial fix infinite demo in Opera Mini
  • add animate.css effects demo

0.8.12 (2014-01-12)

  • fix picture demo
  • reduce size of jquery.lazyloadxt.simple.js

0.8.11 (2014-01-10)

  • handle touchmove event for better response on mobile devices

0.8.10 (2014-01-08)

  • bugfix "video" addon, remove loading of bootstrap.js in zepto.htm demo.

0.8.9 (2014-01-06)

  • new `checkDuplicates` option, speed up work with jQuery
  • rewrite checkDuplicates condition

0.8.8 (2013-12-27)

  • Fix sharing $el.lazyLoadXT object, support $(window).lazyLoadXT({...}) call with overrides parameter

0.8.6 (2013-12-19)

  • Add Google Maps Lite to demo
  • support of "self-lazy" widget (empty value for data-lazy-widget)
  • Bugs fixed.

0.8.5 (2013-12-16)

  • New addons, “simple” version, lazyloadall event, slight reduce minified size

0.8.4 (2013-12-12)

  • Fixed check of removed elements, support of $.lazyLoadXT.videoPoster parameter, additional examples in src (srcset polyfill, transparent placeholder for IE6/7)

This awesome jQuery plugin is developed by ressio. For more Advanced Usages, please check the demo page or visit the official website.