Lazy load XT

Jun 06, 2014 in Animation 5999 views

Download

Overview
Documents
Demos

User Rating: 4.9/5 ( 2 votes)

Your Rating:

Lazy load XT is a jQuery plugin for images, videos and other media.

Mobile-oriented, fast and extensible jQuery plugin for lazy loading of images/videos with build-in support of jQueryMobile framework.

Currently tested in IE 6-11, Chrome 1-31, Firefox 1.5-27.0, Safari 3-7, Opera 10.6-18.0, iOS 5-7, Android 2.3-4.4, Amazon Kindle Fire 2 and HD 8.9, Opera Mini 7.

Required jQuery 1.7+, Zepto 1.0+, or DOMtastic 0.7.2+

Source: github.com

1. INCLUDE JS FILES

<script src="jquery.js"></script>
<script src="jquery.lazyloadxt.js"></script>

2. HTML

<img data-src="lazy.jpg" width="100" height="100">

To make media elements (img, video, source, iframe) to be lazy loaded, rename src attribute to data-src. It is highly recommended to set width and height attributes. Optionally you can add a placeholder src to bypass HTML validators.

3. OPTIONS

The plugin is very extensible and supports a lot of options that are stored in $.lazyLoadXT object:

$.extend($.lazyLoadXT, {
  edgeY:  200,
  srcAttr: 'data-src'
});

You can either create this object before loading of jquery.lazyloadxt.js, or extend it after loading (but before jQuery's ready event).

autoInit: auto initialization of the plugin, that is processing of all elements matching selectorselector in jQuery's ready event, if it is disabled you have to do such initialization manually as explained in Advanced initialization section (default true)
selector: selector for elements that should be lazy-loaded (default 'img[data-src]')
srcAttr: attribute containing actual src path, see example below in Hi-DPI (Retina) images section (default 'data-src')
blankImage: blank image for used until actual image is not loaded (default is transparent 1x1 gif image in data-uri format'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7')
edgeY: expand visible page area (viewport) in vertical direction by specified amount of pixels, so that elements start to load even if they are not visible, but will be visible after scroll by edgeY pixels (default 0)
edgeX: expand visible page area in horizontal direction by specified amount of pixels (default 0)
throttle: time interval (in ms) to check for visible elements, the plugin uses it to speed up page work in the case of flow of page change events (default 99)
visibleOnly: being disabled this option forces the plugin to check element position only, but not to check that it is actually visible (default true)
checkDuplicates: prevent re-add lazy-loaded elements (default true)
scrollContainer: set scroll container (overflow: scroll) for adding elements (default null),
forceLoad: load all elements without checking for visibility (default false)
loadEvent: space-separated list of events when the plugin starts to found new elements matchingselector (default 'pageshow' to check AJAX-loaded content in jQueryMobile and to support backward navigation in iPhone)
updateEvent: space-separated list of events when the plugin starts to check what elements are visible in current viewport (default 'load orientationchange resize scroll')
forceEvent: space-separated list of events when the plugin starts to load all images independently of are they visible or not (default '')
oninit: handler called when the plugin push elements into internal list of "lazy" elements, it may be either a function (DOM element is accessible using this object) or an object with addClass and/orremoveClass properties (addClass is a space-separated list of class names that should be added to the elements, and removeClass contains class names that should be removed, removeClass has higher priority in the case of identical class names) (default {removeClass: 'lazy'})
onshow: handler called when an element appears in viewport area, it may be either a function or an object by analogy to oninit handler, see example below in Spinner section (default {addClass: 'lazy-hidden'})
onload: handler called when element is successfully loaded, it may be either a function or an object by analogy to oninit handler (default {removeClass: 'lazy-hidden', addClass: 'lazy-loaded'})
onerror: handler called when browser cannot load the element, it may be either a function or an object by analogy to oninit handler (default {removeClass: 'lazy-hidden'})
oncomplete: handler called when all lazy-loaded elements are loaded (default null)

4. EVENTS

Lazy Load XT plugin triggers following events for loading elements (after call to corresponding handler in $.lazyLoadXT options):

lazystart, (triggered on window) before plugin's initialization code (binding to events, etc.)
lazyinit, the plugin push element into internal list of "lazy" elements
lazyshow, element appears in viewport area
lazyload, element is successfully loaded
lazyerror, browser cannot load the element
lazycomplete (triggered on <html> element), internal list of lazy-loaded elements is empty, that is all elements are loaded or loading.

Unlike global handlers $.lazyLoadXT, using these events it's possible to assign individual handlers for media elements.

More information at: https://github.com/ressio/lazy-load-xt#download--install

JS Tutorial

Lazy load XT

Related Articles