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

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:

• jQuery Plugin For Lazy Loading Images - lately.js
• Image Lazy Loader Plugin for jQuery - lazyload
• Lightweight jQuery Image Lazy Load Plugin - unveil
• jQuery Delayed Image Loading Plugin - lazy.js
• Simple Javscript Image Lazy Loading with Html5 - Echo.js
• Improve Page Load Time With jQuery Lazy Scroll Loading Plugin

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.