3 Star 0 Fork 0

Gitee 极速下载 / lazysizes

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
此仓库是为了提升国内下载速度的镜像仓库,每日同步一次。 原始仓库: https://github.com/aFarkas/lazysizes
克隆/下载
animate.html 23.76 KB
一键复制 编辑 原始数据 按行查看 历史
aFarkas 提交于 2015-08-20 21:25 . improve support for UC browser
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727
<!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>&lt;img
alt="100%x200"
src="low-quality.jpg"
data-src="normal-quality.jpg"
class="lazyload" /&gt;
</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>&lt;img class="lazyload" data-src="image.jpg" alt="Desert Road" /&gt;
</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>&lt;img
alt=""
src="small.jpg"
sizes="(min-width: 1000px) 930px, 90vw"
data-srcset="small.jpg 500w,
medium.jpg 640w,
big.jpg 1024w"
class="lazyload" /&gt;
</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>&lt;picture&gt;
&lt;!--[if IE 9]&gt;&lt;video style="display: none"&gt;&lt;![endif]--&gt;
&lt;source
data-srcset="500.jpg"
media="(max-width: 500px)" /&gt;
&lt;source
data-srcset="1024.jpg"
media="(max-width: 1024px)" /&gt;
&lt;source
data-srcset="1200.jpg" /&gt;
&lt;!--[if IE 9]>&lt;/video&gt;&lt;![endif]--&gt;
&lt;img
src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
class="lazyload"
alt="image with artdirection" /&gt;
&lt;/picture&gt;
</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>&lt;img
alt=""
data-sizes="auto"
src="small.jpg"
data-srcset="small.jpg 500w,
medium.jpg 640w,
big.jpg 1024w"
class="lazyload" /&gt;
</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>&lt;iframe data-src="//www.youtube.com/embed/ZfV-aYdU4uE" class="lazyload" frameborder="0" allowfullscreen>&lt;/iframe&gt;
</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>&lt;div data-ride="carousel" data-script="assets/js/bootstrap.min.js" class="carousel lazyload"&gt;
&lt;!-- widget content --&gt;
&lt;div&gt;
</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>
1
https://gitee.com/mirrors/lazysizes.git
git@gitee.com:mirrors/lazysizes.git
mirrors
lazysizes
lazysizes
master

搜索帮助