Categories
Plugins

lazyloadxt-amd

  • Post author By
  • Post date

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


Demo: http://ressio.github.io/lazy-load-xt/demo/youtube-iframe.htm
Support  
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
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:

Options:
$.lazyLoadXT.widgetAttr name of attribute with id of commented html code (by default ‘data-lazy-widget’).
Note: widgetAttr option should be set before loading of jquery.lazyloadxt.widget.js as it is used to alter
$.lazyLoadXT.selector option.
Demo: http://ressio.github.io/lazy-load-xt/demo/widget.htm
Print
It is another issue of lazy loading: if user prints the page, only loaded images will be printed. This addon allows
to start loading of all images just after browser switch to print mode to render page. Note that this feature is
browser-dependent and currently it works correctly in IE only. In Chrome browser caches page state until user
change print options (printer, page orientation, margins, etc.). In Firefox and Safari addon works if user chooses
Print Preview before actual print (as they don’t wait until images will be loaded). In Opera it works starting from
15.0 release (Presto didn’t support both beforeprint event and matchMedia listeners).

Demo: http://ressio.github.io/lazy-load-xt/demo/print.htm
Background image
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

      
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