Skip to content

Commit

Permalink
use picturefill 3.0 beta in demos
Browse files Browse the repository at this point in the history
  • Loading branch information
aFarkas committed Jul 22, 2015
1 parent df18bab commit 48002b6
Show file tree
Hide file tree
Showing 3 changed files with 15 additions and 85 deletions.
34 changes: 6 additions & 28 deletions animate.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,11 @@

if(!window.HTMLPictureElement){
document.createElement('picture');
loadJS("https://afarkas.github.io/respimage/respimage.min.js");
//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>

Expand Down Expand Up @@ -330,7 +334,6 @@ <h3>iframe</h3>
<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>
<li data-slide-to="2" data-target="#carousel-example-captions" class="active"></li>
</ol>
<div class="carousel-inner">

Expand All @@ -349,24 +352,9 @@ <h3>First slide label</h3>
<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
</div>
</div>
<div class="item">
<div class="intrinsic">
<img alt="100%x200"
data-srcset="https://farm3.staticflickr.com/2377/1657712955_131576bcd8_m.jpg 240w,
https://farm3.staticflickr.com/2377/1657712955_131576bcd8.jpg 500w,
https://farm3.staticflickr.com/2377/1657712955_131576bcd8_z.jpg?zz=1 640w,
https://farm3.staticflickr.com/2377/1657712955_1b941645fd_o.jpg 800w"
data-sizes="auto"
class="lazyload" />
</div>
<div class="carousel-caption">
<h3>Second slide label</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="item active">
<div class="intrinsic">
<img alt="100%x200"
<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,
Expand Down Expand Up @@ -492,16 +480,6 @@ <h3>Widgets/Javascript/Script</h3>
alt="Goldie Dawn" />
</div>
</div>
<div class="scroll-item">
<div class="thumbnail">
<img
data-sizes="auto"
class="lazyload"
data-srcset="https://farm3.staticflickr.com/2377/1657712955_131576bcd8_m.jpg 240w,
https://farm3.staticflickr.com/2377/1657712955_131576bcd8.jpg 500w"
alt="Sant Miquel del Fai" />
</div>
</div>
<div class="scroll-item">
<div class="thumbnail">
<img
Expand Down
31 changes: 2 additions & 29 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@
<title>lazysizes - the ultimate 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);}

Expand Down Expand Up @@ -390,7 +389,6 @@ <h3><code>[data-expand]</code> + <code>addClasses</code>: More than lazyloading<
<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>
<li data-slide-to="2" data-target="#carousel-example-captions" class="active"></li>
</ol>
<div class="carousel-inner">

Expand All @@ -409,22 +407,7 @@ <h3>First slide label</h3>
<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
</div>
</div>
<div class="item">
<div class="intrinsic">
<img alt="100%x200"
src="https://farm3.staticflickr.com/2377/1657712955_131576bcd8_m.jpg"
data-srcset="https://farm3.staticflickr.com/2377/1657712955_131576bcd8_m.jpg 240w,
https://farm3.staticflickr.com/2377/1657712955_131576bcd8.jpg 500w,
https://farm3.staticflickr.com/2377/1657712955_131576bcd8_z.jpg?zz=1 640w,
https://farm3.staticflickr.com/2377/1657712955_1b941645fd_o.jpg 800w"
data-sizes="auto"
class="lazyload" />
</div>
<div class="carousel-caption">
<h3>Second slide label</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>

<div class="item active">
<div class="intrinsic">
<img alt="100%x200"
Expand Down Expand Up @@ -562,17 +545,7 @@ <h3>Widgets/Javascript/Script</h3>
alt="Goldie Dawn" />
</div>
</div>
<div class="scroll-item">
<div class="thumbnail">
<img
data-sizes="auto"
class="lazyload no-src"
src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
data-srcset="https://farm3.staticflickr.com/2377/1657712955_131576bcd8_m.jpg 240w,
https://farm3.staticflickr.com/2377/1657712955_131576bcd8.jpg 500w"
alt="Sant Miquel del Fai" />
</div>
</div>

<div class="scroll-item">
<div class="thumbnail">
<img
Expand Down
35 changes: 7 additions & 28 deletions no-src.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,13 +6,16 @@
<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){
document.createElement('picture');
loadJS("https://afarkas.github.io/respimage/respimage.min.js");
//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>

Expand Down Expand Up @@ -392,7 +395,6 @@ <h3><code>[data-expand]</code> + <code>addClasses</code>: More than lazyloading<
<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>
<li data-slide-to="2" data-target="#carousel-example-captions" class="active"></li>
</ol>
<div class="carousel-inner">

Expand All @@ -411,21 +413,7 @@ <h3>First slide label</h3>
<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
</div>
</div>
<div class="item">
<div class="intrinsic">
<img alt="100%x200"
data-srcset="https://farm3.staticflickr.com/2377/1657712955_131576bcd8_m.jpg 240w,
https://farm3.staticflickr.com/2377/1657712955_131576bcd8.jpg 500w,
https://farm3.staticflickr.com/2377/1657712955_131576bcd8_z.jpg?zz=1 640w,
https://farm3.staticflickr.com/2377/1657712955_1b941645fd_o.jpg 800w"
data-sizes="auto"
class="lazyload" />
</div>
<div class="carousel-caption">
<h3>Second slide label</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>

<div class="item active">
<div class="intrinsic">
<img alt="100%x200"
Expand Down Expand Up @@ -556,16 +544,7 @@ <h3>Widgets/Javascript/Script</h3>
alt="Goldie Dawn" />
</div>
</div>
<div class="scroll-item">
<div class="thumbnail">
<img
data-sizes="auto"
class="lazyload"
data-srcset="https://farm3.staticflickr.com/2377/1657712955_131576bcd8_m.jpg 240w,
https://farm3.staticflickr.com/2377/1657712955_131576bcd8.jpg 500w"
alt="Sant Miquel del Fai" />
</div>
</div>

<div class="scroll-item">
<div class="thumbnail">
<img
Expand Down

0 comments on commit 48002b6

Please sign in to comment.