<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>lazysizes - the umltimate lazyloader for responsive images, iframes and widget</title>
<link rel="canonical" href="http://afarkas.github.io/lazysizes/index.html" />
<!-- polyfill responsive images: https://github.com/aFarkas/respimage -->
<script>
function loadJS(u){var r=document.getElementsByTagName("script")[ 0 ],s=document.createElement("script");s.src=u;r.parentNode.insertBefore(s,r);}
if(!window.HTMLPictureElement || !('sizes' in document.createElement('img'))){
document.createElement('picture');
//generating the config array
window.picturefillCFG = window.picturefillCFG || [];
picturefillCFG.push([ "algorithm", "saveData" ]);
loadJS("https://cdnjs.cloudflare.com/ajax/libs/picturefill/3.0.0-beta1/picturefill.min.js");
}
</script>
<link href="assets/css/tidy.css" rel="stylesheet" />
<style>
.nav {
margin-bottom: 30px;
}
.intrinsic {
position: relative;
padding-bottom: 75%;
height: 0;
}
.intrinsic-2 {
padding-bottom: 56.25%;
}
.intrinsic img,
.intrinsic iframe,
.intrinsic .lazyload {
position:absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
border: none;
overflow: hidden;
}
.thumbnail-small {
width: 32%;
display: inline-block;
margin-bottom: 35px;
}
pre {
-moz-tab-size: 2;
tab-size: 2;
}
.scroll-view {
overflow: auto;
overflow-x: auto;
overflow-y: hidden;
position: relative;
width: 100%;
padding: 2px 2px 10px;
}
.scroll-doc {
display: table;
position: relative;
text-align: left;
}
.scroll-item {
display: table-cell;
vertical-align: middle;
}
.scroll-item .thumbnail {
margin: 5px 10px;
width: 230px;
}
.scroll-item .thumbnail img {
width: 100%;
height: auto;
}
.lazyloading:not(iframe) {
opacity: 0;
}
.lazyloaded {
opacity: 1;
transition: 400ms opacity;
}
[data-expand].lazyload {
opacity: 0;
transform: scale(0.8);
}
[data-expand].lazyloaded {
opacity: 1;
transition: all 700ms;
transform: scale(1);
}
.effect-row-middle > [data-expand]:nth-child(2),
.effect-row-reverse > [data-expand]:nth-child(3),
.effect-row > [data-expand]:nth-child(1) {
transition-delay: 100ms;
}
.effect-row-middle > [data-expand]:nth-child(1),
.effect-row-middle > [data-expand]:nth-child(3),
.effect-row-reverse > [data-expand]:nth-child(2),
.effect-row > [data-expand]:nth-child(2) {
transition-delay: 400ms;
}
.effect-row-reverse > [data-expand]:nth-child(1),
.effect-row > [data-expand]:nth-child(3) {
transition-delay: 700ms;
}
</style>
<script>
window.lazySizesConfig = window.lazySizesConfig || {};
//window.lazySizesConfig.preloadAfterLoad = true;
window.lazySizesConfig.expand = 10;
</script>
<script src="plugins/unveilhooks/ls.unveilhooks.min.js" async=""></script>
<script src="lazysizes.min.js" async=""></script>
</head>
<body>
<div class="container">
<div class="jumbotron">
<h1>lazySizes</h1>
<p><strong>lazySizes</strong> is the ultimate and lightweight lazyLoader which lazy loads images (including responsive images (picture/srcset)), iframes and scripts. It is written in VanillaJS and with high performance in mind.</p>
<p>Simply add the JS to your website and put the <code>class</code> <code>lazyload</code> to all elements, which should be lazy loaded. For a short <a href="https://github.com/aFarkas/lazysizes/blob/gh-pages/README.md">API description go to the readme.md</a>.</p>
</div>
<div id="examples">
<div class="row">
<div class="col-sm-12">
<div class="thumbnail">
<div class="intrinsic">
<img alt="Boat"
data-src="https://farm5.staticflickr.com/4094/4859138371_9713d4396e_b.jpg"
class="lazyload" />
</div>
<div class="caption">
<h3>Image with LQIP technique</h3>
<p>The low quality image placeholder pattern is a performance technique. While it might increase measuered time until the <code>onload</code> event, it dramatically increases percieved performance.</p>
<p>This pattern is recommend for above the fold/crictical images.</p>
<pre><img
alt="100%x200"
src="low-quality.jpg"
data-src="normal-quality.jpg"
class="lazyload" />
</pre>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="thumbnail">
<div class="intrinsic">
<img alt="Desert Road" data-src="https://farm6.staticflickr.com/5531/9638435181_7e3e44c2b8_b.jpg" class="lazyload" />
</div>
<div class="caption">
<h3>Normal lazy image</h3>
<p>The normal image pattern is can be used for non-critical images or in case there is no low quality image available:</p>
<pre><img class="lazyload" data-src="image.jpg" alt="Desert Road" />
</pre>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="thumbnail">
<div class="intrinsic">
<img
sizes="(min-width: 1000px) 930px, 90vw"
data-srcset="https://farm5.staticflickr.com/4078/5441060528_31db7838ba_m.jpg 240w,
https://farm5.staticflickr.com/4078/5441060528_31db7838ba_n.jpg 320w,
https://farm5.staticflickr.com/4078/5441060528_31db7838ba.jpg 500w,
https://farm5.staticflickr.com/4078/5441060528_31db7838ba_z.jpg 640w,
https://farm5.staticflickr.com/4078/5441060528_31db7838ba_b.jpg 1024w"
class="lazyload" />
</div>
<div class="caption">
<h3>responsive image with srcset and sizes attribute</h3>
<p>Simply use <code>data-srcset</code> and <code>data-sizes</code> and you can support responsive images.</p>
<pre><img
alt=""
src="small.jpg"
sizes="(min-width: 1000px) 930px, 90vw"
data-srcset="small.jpg 500w,
medium.jpg 640w,
big.jpg 1024w"
class="lazyload" />
</pre>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="thumbnail">
<div class="intrinsic">
<picture>
<!--[if IE 9]><audio><![endif]-->
<source
data-srcset="http://lorempixel.com/710/533/people/9/"
media="(max-width: 990px)" />
<source
data-srcset="http://lorempixel.com/930/698/people/8/"
media="(max-width: 1024px)" />
<source
data-srcset="http://lorempixel.com/1130/848/people/" />
<!--[if IE 9]></audio><![endif]-->
<img
class="lazyload"
alt="image with artdirection" />
</picture>
</div>
<div class="caption">
<h3>responsive image with the <code>picture</code> element</h3>
<p>The picture element is also supported. Simply add the <code>lazyload</code> class to the <code>img</code> and use <code>data-srcset</code> on your <code>source</code> and the <code>img</code> element.</p>
<pre><picture>
<!--[if IE 9]><video style="display: none"><![endif]-->
<source
data-srcset="500.jpg"
media="(max-width: 500px)" />
<source
data-srcset="1024.jpg"
media="(max-width: 1024px)" />
<source
data-srcset="1200.jpg" />
<!--[if IE 9]></video><![endif]-->
<img
src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
class="lazyload"
alt="image with artdirection" />
</picture>
</pre>
</div>
</div>
</div>
</div>
<div class="row" id="autosizes-example">
<div class="alert alert-info">
<p><strong>automatic sizes feature</strong>: In case of lazy loading images the <code>sizes</code> attribute of the <code>img</code>/<code>source</code> elements can be calculated with JS.</p>
<p>This automatic sizes feature is directly included in <strong>lazySizes</strong>. Simply use the keyword <code>auto</code> inside of the <code>data-sizes</code> attributes (<code>data-sizes="auto"</code>).</p>
<p><strong>Important: How <code>sizes</code> is calculated</strong>: The automatic sizes calculation takes the width of the image if it is over <code>40</code> (see also <code>minSize</code> option). In case it's below the <code>minSize</code> threshold, it traverses up the DOM tree until it finds a parent which is over <code>40</code> and uses this number. Often the following general CSS rule might help: <code>img[data-sizes="auto"] { display: block; }</code>.</p>
</div>
<div class="col-sm-12">
<div class="thumbnail">
<div class="intrinsic">
<img
alt=""
data-sizes="auto"
data-srcset="https://farm9.staticflickr.com/8200/8248153196_7a7664e147_m.jpg 240w,
https://farm9.staticflickr.com/8200/8248153196_7a7664e147_n.jpg 320w,
https://farm9.staticflickr.com/8200/8248153196_7a7664e147.jpg 500w,
https://farm9.staticflickr.com/8200/8248153196_7a7664e147_c.jpg 800w,
https://farm9.staticflickr.com/8200/8248153196_7a7664e147_b.jpg 1024w"
class="lazyload" />
</div>
<div class="caption">
<h3>responsive image with srcset and <strong>automatic sizes</strong> attribute</h3>
<p>The <strong>autosizes feature</strong> makes using responsive images with the right <code>sizes</code> value easy as hell.</p>
<pre><img
alt=""
data-sizes="auto"
src="small.jpg"
data-srcset="small.jpg 500w,
medium.jpg 640w,
big.jpg 1024w"
class="lazyload" />
</pre>
</div>
</div>
</div>
</div>
<div class="row">
<div class="alert alert-danger">
<p>For responsive images support you must use either use a full polyfill like <a href="https://github.com/scottjehl/picturefill" target="_blank">picturefill</a> or <a href="https://github.com/aFarkas/respimage">respimage</a> or use the <a href="https://github.com/aFarkas/lazysizes/blob/gh-pages/plugins/respimg">extreme lightweight partial respimg polyfill plugin</a> or use the <a href="https://github.com/aFarkas/lazysizes/tree/gh-pages/plugins/rias">Responsive Images as a Service extension</a>.</p>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="thumbnail">
<div class="intrinsic intrinsic-2">
<iframe data-src="//www.youtube.com/embed/ZfV-aYdU4uE" frameborder="0" allowfullscreen="" class="lazyload">
</iframe>
</div>
<div class="caption">
<h3>iframe</h3>
<p>Iframes can be loaded too:</p>
<pre><iframe data-src="//www.youtube.com/embed/ZfV-aYdU4uE" class="lazyload" frameborder="0" allowfullscreen></iframe>
</pre>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="thumbnail">
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<div data-ride="carousel" data-script="assets/js/bootstrap.min.js" data-link="assets/css/carousel.css" class="carousel lazyload lazypreload slide" data-interval="false" id="carousel-example-captions">
<ol class="carousel-indicators">
<li data-slide-to="0" data-target="#carousel-example-captions"></li>
<li data-slide-to="1" data-target="#carousel-example-captions"></li>
</ol>
<div class="carousel-inner">
<div class="item">
<div class="intrinsic">
<img alt="100%x200"
data-sizes="auto"
data-srcset="https://farm1.staticflickr.com/113/284651694_69e63b374d_m.jpg 240w,
https://farm1.staticflickr.com/113/284651694_69e63b374d.jpg 500w,
https://farm1.staticflickr.com/113/284651694_69e63b374d_z.jpg?zz=1 640w,
https://farm1.staticflickr.com/113/284651694_69e63b374d_o.jpg 800w"
class="lazyload" />
</div>
<div class="carousel-caption">
<h3>First slide label</h3>
<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
</div>
</div>
<div class="item active">
<div class="intrinsic">
<img alt="100%x200"
data-srcset="https://farm4.staticflickr.com/3059/2835191823_e3636abb34_m.jpg 240w,
https://farm4.staticflickr.com/3059/2835191823_e3636abb34_n.jpg 320w,
https://farm4.staticflickr.com/3059/2835191823_e3636abb34.jpg 500w,
https://farm4.staticflickr.com/3059/2835191823_e3636abb34_z.jpg 640w,
https://farm4.staticflickr.com/3059/2835191823_e3636abb34_b.jpg 1024w"
data-sizes="auto"
class="lazyload" />
</div>
<div class="carousel-caption">
<h3>Third slide label</h3>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
</div>
</div>
</div>
<a data-slide="prev" role="button" href="#carousel-example-captions" class="left carousel-control">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a data-slide="next" role="button" href="#carousel-example-captions" class="right carousel-control">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
<div class="caption">
<h3>Widgets/Javascript/Script</h3>
<p>LazySizes can be extended to load nearly everything lazily. The <a href="https://github.com/aFarkas/lazysizes/tree/gh-pages/plugins">ls.unveilhooks.js</a> plugin can be used to lazy load scripts, background images, and videos. Simply add a <code>data-script</code> to your widget and you are done:</p>
<pre><div data-ride="carousel" data-script="assets/js/bootstrap.min.js" class="carousel lazyload">
<!-- widget content -->
<div>
</pre>
</div>
</div>
</div>
</div>
<div class="row">
<div class="scroll-view">
<div class="scroll-doc">
<div class="scroll-item">
<div class="thumbnail">
<img
data-sizes="auto"
class="lazyload"
data-srcset="https://farm6.staticflickr.com/5531/9638435181_7e3e44c2b8_m.jpg 240w,
https://farm6.staticflickr.com/5531/9638435181_7e3e44c2b8_n.jpg 320w,
https://farm6.staticflickr.com/5531/9638435181_7e3e44c2b8.jpg 500w,
https://farm6.staticflickr.com/5531/9638435181_7e3e44c2b8_z.jpg 640w,
https://farm6.staticflickr.com/5531/9638435181_7e3e44c2b8_c.jpg 800w,
https://farm6.staticflickr.com/5531/9638435181_7e3e44c2b8_b.jpg 1024w"
alt="Desert Road" />
</div>
</div>
<div class="scroll-item">
<div class="thumbnail">
<img
data-sizes="auto"
class="lazyload"
data-srcset="https://farm5.staticflickr.com/4078/5441060528_31db7838ba_m.jpg 240w,
https://farm5.staticflickr.com/4078/5441060528_31db7838ba_n.jpg 320w,
https://farm5.staticflickr.com/4078/5441060528_31db7838ba.jpg 500w,
https://farm5.staticflickr.com/4078/5441060528_31db7838ba_z.jpg 640w"
alt="" />
</div>
</div>
<div class="scroll-item">
<div class="thumbnail">
<img
data-sizes="auto"
class="lazyload"
data-srcset="https://farm9.staticflickr.com/8200/8248153196_7a7664e147_m.jpg 240w,
https://farm9.staticflickr.com/8200/8248153196_7a7664e147_n.jpg 320w,
https://farm9.staticflickr.com/8200/8248153196_7a7664e147.jpg 500w"
alt="@ The Desert Tortoise Natural Area" />
</div>
</div>
<div class="scroll-item">
<div class="thumbnail">
<img
data-sizes="auto"
class="lazyload"
data-srcset="https://farm1.staticflickr.com/113/284651694_69e63b374d_m.jpg 240w,
https://farm1.staticflickr.com/113/284651694_69e63b374d.jpg 500w"
alt="Woman in water" />
</div>
</div>
<div class="scroll-item">
<div class="thumbnail">
<img
data-sizes="auto"
class="lazyload"
data-srcset="https://farm3.staticflickr.com/2401/2171553538_37d0a133da_m.jpg 240w,
https://farm3.staticflickr.com/2401/2171553538_37d0a133da.jpg 500w"
alt="Borobudur" />
</div>
</div>
<div class="scroll-item">
<div class="thumbnail">
<img
data-sizes="auto"
class="lazyload"
data-srcset="https://farm1.staticflickr.com/17/92230866_713ae1eeef_n.jpg 240w,
https://farm1.staticflickr.com/17/92230866_713ae1eeef.jpg 375w,
https://farm1.staticflickr.com/17/92230866_713ae1eeef_z.jpg 480w"
alt="A tree in the blue" />
</div>
</div>
<div class="scroll-item">
<div class="thumbnail">
<img
data-sizes="auto"
class="lazyload"
data-srcset="https://farm1.staticflickr.com/192/504251019_ffc94c77b5_n.jpg 240w,
https://farm1.staticflickr.com/192/504251019_ffc94c77b5.jpg 375w,
https://farm1.staticflickr.com/192/504251019_ffc94c77b5_z.jpg 480w"
alt="Windows on Istanbul" />
</div>
</div>
<div class="scroll-item">
<div class="thumbnail">
<img
data-sizes="auto"
class="lazyload"
data-srcset="https://farm6.staticflickr.com/5139/5546134597_0b19627066_m.jpg 240w,
https://farm6.staticflickr.com/5139/5546134597_0b19627066_n.jpg 320w,
https://farm6.staticflickr.com/5139/5546134597_0b19627066.jpg 500w"
alt="Goldie Dawn" />
</div>
</div>
<div class="scroll-item">
<div class="thumbnail">
<img
data-sizes="auto"
class="lazyload"
data-srcset="https://farm3.staticflickr.com/2727/4393975099_c212622aa0_m.jpg 240w,
https://farm3.staticflickr.com/2727/4393975099_c212622aa0_n.jpg 320w"
alt="Avebury Stone Circle" />
</div>
</div>
<div class="scroll-item">
<div class="thumbnail">
<img
data-sizes="auto"
class="lazyload"
data-srcset="https://farm4.staticflickr.com/3059/2835191823_e3636abb34_m.jpg 240w,
https://farm4.staticflickr.com/3059/2835191823_e3636abb34_n.jpg 320w"
alt="el castil de tierra" />
</div>
</div>
<div class="scroll-item">
<div class="thumbnail">
<img
data-sizes="auto"
class="lazyload"
data-srcset="https://farm8.staticflickr.com/7356/11122919374_55294abec3_m.jpg 240w,
https://farm8.staticflickr.com/7356/11122919374_55294abec3_n.jpg 320w,
https://farm8.staticflickr.com/7356/11122919374_55294abec3.jpg 500w"
alt="sunset" />
</div>
</div>
<div class="scroll-item">
<div class="thumbnail">
<img
data-sizes="auto"
class="lazyload"
data-srcset="https://farm6.staticflickr.com/5506/11122805655_e63cb3a9fc_m.jpg 240w,
https://farm6.staticflickr.com/5506/11122805655_e63cb3a9fc_n.jpg 320w,
https://farm6.staticflickr.com/5506/11122805655_e63cb3a9fc.jpg 500w"
alt="Sky and earth" />
</div>
</div>
<div class="scroll-item">
<div class="thumbnail">
<img
data-sizes="auto"
class="lazyload"
data-srcset="https://farm4.staticflickr.com/3023/2994603808_a3036a3cdf_n.jpg 240w,
https://farm4.staticflickr.com/3023/2994603808_a3036a3cdf.jpg 375w,
https://farm4.staticflickr.com/3023/2994603808_a3036a3cdf_z.jpg 480w"
alt="Missing Ulsoor lake (Explore)" />
</div>
</div>
<div class="scroll-item">
<div class="thumbnail">
<img
data-sizes="auto"
class="lazyload"
data-srcset="https://farm7.staticflickr.com/6211/6254520191_c7868f3a5d_n.jpg 227w,
https://farm7.staticflickr.com/6211/6254520191_c7868f3a5d.jpg 354w,
https://farm7.staticflickr.com/6211/6254520191_c7868f3a5d_z.jpg 453w"
alt="Oxford Path 2" />
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="alert alert-info">
<p>While other lazy loaders or responsive images solution need to be called, if new elements are added to the DOM or do become visible through a special user interaction or a JavaScript behavior.</p>
<p>LazySizes does automatically detect any changes to the DOM and the visibility of <code>.lazyload</code> elements.</p>
<button type="button" class="add-new btn btn-primary">click to add new elements</button>
</div>
<script type="text/html" class="template">
<div class="row">
<div class="thumbnail thumbnail-small lazyload" data-expand="-40">
<div class="intrinsic">
<img
class="lazyload no-src"
data-src="http://lorempixel.com/400/300/abstract/1/"
alt="" />
</div>
</div>
<div class="thumbnail thumbnail-small lazyload" data-expand="-40">
<div class="intrinsic">
<img
class="lazyload no-src"
data-src="http://lorempixel.com/400/300/animals/1"
alt="" />
</div>
</div>
<div class="thumbnail thumbnail-small lazyload" data-expand="-40">
<div class="intrinsic">
<img
class="lazyload no-src"
data-src="http://lorempixel.com/400/300/business/1/"
alt="" />
</div>
</div>
</div>
<div class="row effect-row">
<div class="thumbnail thumbnail-small lazyload lightSpeedIn" data-expand="-40">
<div class="intrinsic">
<img
class="lazyload no-src"
data-src="http://lorempixel.com/400/300/cats/1/"
alt="" />
</div>
</div>
<div class="thumbnail thumbnail-small lazyload lightSpeedIn" data-expand="-40">
<div class="intrinsic">
<img
class="lazyload no-src"
data-src="http://lorempixel.com/400/300/city/1/"
alt="" />
</div>
</div>
<div class="thumbnail thumbnail-small lazyload lightSpeedIn" data-expand="-40">
<div class="intrinsic">
<img
class="lazyload no-src"
data-src="http://lorempixel.com/400/300/food/1/"
alt="" />
</div>
</div>
</div>
<div class="row effect-row-middle">
<div class="thumbnail thumbnail-small lazyload" data-expand="-40">
<div class="intrinsic">
<img
class="lazyload no-src"
data-src="http://lorempixel.com/400/300/nature/1/"
alt="" />
</div>
</div>
<div class="thumbnail thumbnail-small lazyload" data-expand="-40">
<div class="intrinsic">
<img
class="lazyload no-src"
data-src="http://lorempixel.com/400/300/sports/1/"
alt="" />
</div>
</div>
<div class="thumbnail thumbnail-small lazyload" data-expand="-40">
<div class="intrinsic">
<img
class="lazyload no-src"
data-src="http://lorempixel.com/400/300/technics/1/"
alt="" />
</div>
</div>
</div>
<div class="row effect-row-reverse">
<div class="thumbnail thumbnail-small lazyload flipInX" data-expand="-40">
<div class="intrinsic">
<img
class="lazyload no-src"
data-src="http://lorempixel.com/400/300/nightlife/1/"
alt="" />
</div>
</div>
<div class="thumbnail thumbnail-small lazyload flipInX" data-expand="-40">
<div class="intrinsic">
<img
class="lazyload no-src"
data-src="http://lorempixel.com/400/300/fashion/1/"
alt="" />
</div>
</div>
<div class="thumbnail thumbnail-small lazyload flipInX" data-expand="-40">
<div class="intrinsic">
<img
class="lazyload no-src"
data-src="http://lorempixel.com/400/300/people/1/"
alt="" />
</div>
</div>
</div>
<div class="row">
<div class="thumbnail thumbnail-small lazyload" data-expand="-40">
<div class="intrinsic">
<img
class="lazyload no-src"
data-src="http://lorempixel.com/400/300/transport/1/"
alt="" />
</div>
</div>
<div class="thumbnail thumbnail-small lazyload" data-expand="-40">
<div class="intrinsic">
<img
class="lazyload no-src"
data-src="http://lorempixel.com/400/300/animals/1/"
alt="" />
</div>
</div>
<div class="thumbnail thumbnail-small lazyload" data-expand="-40">
<div class="intrinsic">
<img
class="lazyload no-src"
data-src="http://lorempixel.com/400/300/food/2/"
alt="" />
</div>
</div>
</div>
</script>
<script>
$('.add-new').on('click', function(){
var $template = $('.template');
$template.after($template.html());
});
</script>
<br />
<br />
<br />
<br />
<br />
<br />
</div>
</div>
</div>
</body>
</html>