- Overview
- Documents
- Demos
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
- Fade-in: Lazy loading with fade-in effect
- Spinner: Lazy loading with spinner effect
- Animate.css effects: Use effects from animate.css project for loaded images.
- jQuery Mobile: Work with jQuery Mobile framework
- Horizontal scroll: Lazy loading for horizontal scroll
- Stress Test: Test of work on page with 1000 images
- Zepto: Work with Zepto library
- DOMtastic: Work with DOMtastic library
- Noscript: Example of markup for disabled JavaScript support
- Infinite scroll: Infinite scroll with lazy loading
- AJAX: Work with AJAX-loaded content
- Youtube: Lazy loading of YouTube videos
- Video: Lazy loading of <video> content
- Background images: Lazy loading of background images
- Print: Load images before print
- Retina: Responsive images for different pixel densities
- Responsive images (srcset addon): Lazy loading of responsive images
- Responsive images (picture addon): Lazy loading of responsive images
- Autoload: All images will be loaded after page's `load` event
- Script-based tagging: Tagging lazy elements with <script> tag
- iframe Widgets: Lazy loading of Facebook, Google+ Profile and Google Maps widgets as <iframe>s
- JavaScript Widgets: Lazy loading of Facebook, Twitter, and other widgets