Lazy Load XT jQuery plugin
Table of Contents
About
Download / Install
Usage
jQLight
Demo
Advanced initialization
Browsers with disabled JavaScript
Options
Events
More than images
Extendability
Spinner
Fade-in animation
Animate.css
Horizontal scroll
Infinite scroll
Hi-DPI (Retina) images
AJAX
Support of IE6/7
Addons
Bootstrap and jQueryMobile
Video
Responsive images
Widgets
Print
Background image
PS. In src directory you can found jquery.lazyloadxt.simple.js, it is initial LazyLoadXT version of minimal size
with excluded support of on* handlers, lazy* events, blankImage option and addons.
jQLight
LazyLoadXT may be used without jQuery framework by loading small
jqlight.lazyloadxt.min.js script
(1.3KiB gzipped):
Note: currently jquery.lazyloadxt.bg.js addon is not supported by jQLight.
Demo
Demo: ressio.github.io/lazy-load-xt
Advanced initialization
There are two ways to initialize elements if auto initialization doesn’t suit you:
$(window).lazyLoadXT(); to initialize all elements matching $.lazyLoadXT.selector
$(elements).lazyLoadXT(); to initialize all selected elements.
For example, $(container).find(selector).lazyLoadXT(); initializes elements matching selector inside container.
You can pass optional argument to override default $.lazyLoadXT options. The following options only may be overridden:
srcAttr, edgeX, edgeY, visibleOnly, blankImage, checkDuplicates, scrollContainer.
Note: don’t forget to disable auto initialization with $.lazyLoadXT.autoInit=false; if you like to use manual
initialization of all elements.
To manually show elements (may be necessary for integrating Lazy Load XT with some 3rdparty plugins), call
$(elements).lazyLoadXT({show: true});.
Browsers with disabled JavaScript
As JavaScript may be disabled in the browser (e.g. it may be a feature phone with limited javascript support or browser
with Noscript addon), it is usually recommended to add a fallback image in tag, mark initial image with
class=”lazy” attribute and hide it using CSS (otherwise browsers with disabled javascript will display both images).
Lazy Load XT plugin removes this class (oninit.removeClass option) at image initialization. So, final code should be
like:
img.lazy { display: none;}
We recommend to keep the order of attributes in both tags, because of such a code will be effectively gzipped.
Alternative approach is based on tagging images/videos with
Demo: http://ressio.github.io/lazy-load-xt/demo/youtube-iframe.htm
Support tag
It is easy too, just replace src attribute by data-src and poster by data-poster (if exists).
Demo: http://ressio.github.io/lazy-load-xt/demo/video-html5.htm
Extendability
Lazy Load XT plugin may be easily extended using oninit, onshow, onload and onerror handlers. Some examples are
listed below.
Spinner
Some effects may be easily added by using lazy-hidden and lazy-loaded css classes. For example, to display animated
spinner while image is loading, just load jquery.lazyloadxt.spinner.css css file:
Demo: http://ressio.github.io/lazy-load-xt/demo/spinner.htm
Fade-in animation
To add fade-in animation just load jquery.lazyloadxt.fadein.css CSS file:
Demo: http://ressio.github.io/lazy-load-xt/demo/fadein.htm
Animate.css
It’s possible to use a lot of animation effects (like bounce, flip, rotate, etc.) from
animate.css project by altering $.lazyLoadXT.onload.addClass option:
/* JS */$.lazyLoadXT.onload.addClass = ‘animated bounceOutLeft’;
Demo: http://ressio.github.io/lazy-load-xt/demo/animatecss.htm
Horizontal scroll
Lazy Load XT checks that an image is in viewport in both vertical and horizontal dimensions, so that it is easy to
make lazy loading of images in horizontal scroller. Let’s assume that your html markup of scroller is something like
with following CSS rules to make .wrapper scrollable in horizontal direction and images to be alined:
/* CSS */.wrapper { overflow-x: scroll; overflow-y: hidden; white-space: nowrap;}.wrapper > img { display: inline-block; *display: inline; *zoom: 1;}
Then all that you need is to proxy scroll event from .wrapper element to window because of scroll event is not
bubbled automatically. It may be easily
done using scrollContainer option:
/* JS */$.lazyLoadXT.scrollContainer = ‘.wrapper’;
Demo: http://ressio.github.io/lazy-load-xt/demo/horizontal.htm
Infinite scroll
Using Lazy Load XT it is easily to get “infinite scroll” effect. Just put a marker element at the end of list
and load next part of elements in lazyshow handler, e.g.:
/* JS */$(document).ready(function () { $(‘#marker’).on(‘lazyshow’, function () { $.ajax({…}).done(function (responseText) { // add new elements: // … // process new elements: $(window).lazyLoadXT(); $(‘#marker’).lazyLoadXT({visibleOnly: false, checkDuplicates: false}); }); }).lazyLoadXT({visibleOnly: false});});
Demo: http://ressio.github.io/lazy-load-xt/demo/infinite.htm
Hi-DPI (Retina) images
The code below allows you to use data-src-3x attribute for screens with 3x density (e.g. Samsung Galaxy S4),
data-src-2x for 2x density (e.g. iPhones 4+), and data-src-1.5x for 1.5x density (e.g. HTC Incredible S).
/* JS */(function($, dpr) { if (dpr>1) $.lazyLoadXT.srcAttr = ‘data-src-‘ + (dpr > 2 ? ‘3x’ : (dpr > 1.5 ? ‘2x’ : ‘1.5x’));})(jQuery, window.devicePixelRatio || 1);
Demo: http://ressio.github.io/lazy-load-xt/demo/retina.htm
But in real world it’s better to set srcAttr function and choose most suitable image URL among existing ones. Or set
src attribute in lazyshow event, like it is done in Responsive images and srcset
addon.
AJAX
If you use jQuery-based AJAX navigation and don’t like to change existing AJAX callbacks,
you can apply lazy loading to new loaded content using ajaxComplete event. Note that $.lazyLoadXT.loadEvent = ‘pageshow ajaxComplete’; may not work correctly because of content is not added to the page at the time of
ajaxComplete event, that’s why it’s better to postpone initialization by setTimeout:
/* JS */$(window).on(‘ajaxComplete’, function() { setTimeout(function() { $(window).lazyLoadXT(); }, 50);});
Demo: http://ressio.github.io/lazy-load-xt/demo/ajax.htm
Support of IE6/7
Lazy Load XT uses Data-URI-encoded transparent image for images outside of viewport (though this image may be visible
during fast page scroll or in print preview). As IE 6 and 7 don’t support Data-URI, you can change image for that
browsers:
/* JS */if (parseInt(navigator.userAgent.toLowerCase().split(‘msie’)[1] || 8, 10) < 8) $.lazyLoadXT.blankImage = '//upload.wikimedia.org/wikipedia/en/d/d0/Clear.gif';
Addons
Lazy Load XT may be easily extended to support other lazyloading-related things. Some examples are part of Lazy Load XT
project and listed below.
Bootstrap and jQueryMobile
To support Bootstrap and jQueryMobile frameworks, use
and
addons, correspondingly. These addons recheck visible images each time related javascript plugin (e.g. Bootstrap’s Carousel
or jQueryMobile’s Panel) changes page content.
Video
Support of video elements in extra version of Lazy Load XT is just an addon that is combined with base version of
the script. That is loading of
is identical to loading of
Options
$.lazyLoadXT.videoPoster name of attribute with path to background image (by default ‘data-poster’).
Note: this addon append iframe[data-src] to $.lazyLoadXT.selector, so if you change $.lazyLoadXT.srcAttr option,
selector option should be altered properly.
Responsive images
There are two addons for responsive images:
srcset for lazy loading of images with polyfill for srcset attribute.
picture for lazy loading of images with polyfill for tag.
srcset addon allows to combine lazy loading and responsive images description in data-srcset attribute of
tag. Format of responsive images description is based on
srcset attribute draft of HTML extension for adaptive images:
It’s possible to simplify images description using data-srcset-base and data-srcset-ext attributes, so that actual
images URI is concatenation of data-srcset-base, chosen part of data-src description, and data-srcset-ext:
If you like to have fallback image name to be data-srcset-base+data-srcset-ext (image.jpg in above example),
just put comma at the end of data-srcset description: data-srcset=”-hd 2x, -phone 360w, -phone-hd 360w 2x,”. Note
that this addon doesn’t require browser to support srcset attribute.
Options
$.lazyLoadXT.srcsetAttr name of attribute with srcset-based description (by default ‘data-srcset’).
$.lazyLoadXT.srcsetExtended enable support of srcsetBaseAttr and srcsetExtAttr options (by default true).
$.lazyLoadXT.srcsetBaseAttr name of attribute with prefix for image URI (by default ‘data-srcset-base’).
$.lazyLoadXT.srcsetExtAttr name of attribute with suffix for image URI (by default ‘data-srcset-ext’).
Demo: http://ressio.github.io/lazy-load-xt/demo/srcset.htm
picture addon is based on tag draft of HTML extension for
adaptive images. Just renametags to , src attribute to data-src, and add few CSS rules to make
block element in browsers that don’t support it:
/* CSS */picture { display: block;}picture > br { display: none;}img { max-width: 100%; height: auto !important;}
Image caption
Note: currently data-srcset attribute is not supported by this addon, but most likely further both srcset and
picture addons will be merged into single one, so that srcset format for responsive images will be supported by
and tags.
Demo: http://ressio.github.io/lazy-load-xt/demo/picture.htm
Widgets
Images and videos are not the only heavy parts of the page. Nowadays it’s hard to find website that doesn’t use
widgets for different social medias (like Twitter, Facebook, Google+, etc.). If integration with such resource is done
using