Lazy load XT is a jQuery plugin for images, videos and other media
Lazy load XT is a jQuery plugin for images, videos and other media
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`](https://raw.github.com/ressio/lazy-load-xt/master/dist/jqlight.lazyloadxt.min.js) script
(1.3KiB gzipped):
```html
…
css
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 `
```html
Demo: http://ressio.github.io/lazy-load-xt/demo/youtube-iframe.htm
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
Lazy Load XT plugin may be easily extended using oninit, onshow, onload and onerror handlers. Some examples are
listed below.
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
To add fade-in animation just load jquery.lazyloadxt.fadein.css CSS file:
Demo: http://ressio.github.io/lazy-load-xt/demo/fadein.htm
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
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
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
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.
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
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) ` tags to `
`, `src` attribute to `data-src`, and add few CSS rules to make
`` block element in browsers that don't support it:
```css
/* CSS */
picture {
display: block;
}
picture > br {
display: none;
}
img {
max-width: 100%;
height: auto !important;
}
Image caption
…
html
Demo: http://ressio.github.io/lazy-load-xt/demo/widget-iframe.htm
But in most cases JavaScript is used to embed widgets. Specially for this case we have universal
jquery.lazyloadxt.widget.js addon that allows to add some html code to the page when other element become visible.
The code should wrapped in html comment inside a div with assigned id attribute, and the element should have
data-lazy-widget attribute with value of that id:
If data-lazy-widget attribute has empty value, the element itself is used as wrapper:
…
html
Demo: http://ressio.github.io/lazy-load-xt/demo/print.htm
This addon allows you to use lazy-loading technique for background images of any tag.
Above code set background-image CSS property to /path/to/image.png as soon div element becomes visible in
viewport area.
Options:
$.lazyLoadXT.bgAttr name of attribute with path to background image (by default 'data-bg'). Note: option
should be set before loading of jquery.lazyloadxt.bg.js as it is used to alter $.lazyLoadXT.selector option.
Demo: http://ressio.github.io/lazy-load-xt/demo/bg.htm
```html
Here L() is function that should be called before self-closed tag like and (optional argument is
the tag name of lazy loaded element, by default 'img'), Lb() should be called before other tags like and (optional argument is the tag name of lazy loaded element, by default 'video'), and Le() should be
called after corresponding closing tag.
Options:
$.lazyLoadXT.srcsetAttr name of attribute with responsive rules in srcset format, $.lazyLoadXT.srcsetBaseAttr name of attribute for URL prefix, $.lazyLoadXT.srcsetExtAttr name of attribute for URL suffix
Demo: http://ressio.github.io/lazy-load-xt/demo/script-tag.htm
This is very simple addon (just few lines of code) that loads all images after specified time after page loading. That is loading of images doesn't affect loading of CSSes and JavaScripts, and time to initial website rendering will be decreased.
Options:
$.lazyLoadXT.autoLoadTime time interval between load page event and start of image loading (in ms, default is 50)
Demo: http://ressio.github.io/lazy-load-xt/demo/autoload.htm
Instead of manipulating tags directly (that is to replace `src` by `data-src`, add fallback image, etc.), it's possible to do html page postprocessing using [your favorite] language.
Here is example of how to do it using PHP:
…
Lazy Load XT may be loaded from jsDelivr CDN
or CDNJS CDN
Note that any of Lazy Load XT dist files may be loaded from CDN, not only jquery.lazyloadxt.min.js.
1.1.0 (11.01.2016): jQLight script, remove lazy-hidden class for non-img elements, fix lazy loading if there is one image only, fix issues in bg, srcset, and video addons, new addons for Bootstrap and jQueryMobile events
1.0.6 (19.11.2014): fix work of srcset addons in IE6-8
1.0.5 (05.06.2014): fix picture and script addons
1.0.4 (30.05.2014): fix calls to each() method
1.0.3 (28.05.2014): support DOMstatic library (attr, class, data, event, selector, and type modules are required); fix loading of images on browser's tab activation
1.0.2 (05.03.2014): fix work in jQuery Mobile 1.4
1.0.1 (16.02.2014): fix triggering lazyload and lazyerror
events in scrset and picture addons
1.0.0 (16.01.2014): new forceLoad option, classNojs
option is removed in flavour of options.oninit.removeClass, lazyloadall event is renamed to lazycomplete,
new oncomplete option, fix work with Zepto, fix work in some old mobile browsers, default value for selector
option is set to img[data-src], lazy* events are triggered after corresponding on* handlers, new lazystart event,
remove "simple" version from build.
0.8.12 (12.01.2014): significant performance improvement,
fix work in BlackBerry 5, fix checkDuplicates options
0.8.11 (10.01.2014): fix to work in browsers without
scroll event (e.g. Opera Mini), handle touchmove event for better response on mobile devices.
0.8.10 (07.01.2014): bugfix "video" addon, remove loading of
bootstrap.js in zepto.htm demo.
[0.8.9](https://gith
No open issues yet, or sync has not completed.