Skip to content

Commit

Permalink
update
Browse files Browse the repository at this point in the history
  • Loading branch information
aFarkas committed Oct 12, 2014
1 parent 4a47599 commit 554a56a
Show file tree
Hide file tree
Showing 4 changed files with 277 additions and 8 deletions.
8 changes: 5 additions & 3 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,8 @@ As a nice bonus lazysizes supports setting the ``sizes`` attribute automatically
responsive-image3.jpg 900w" class="lazyload" />
```

**How sizes is calculated**: The automatic sizes calculation takes the with of the image and the width of its parent element and uses the largeest number of those two calculated numbers. It's therefore important, that all images are contained in a wrapper that isn't much bigger than the image should shown. Otherwise a wrong (too big) sizes attribute will be calculated.

For JS off support simply use a ``span`` or ``div`` element as a wrapper for a ``noscript`` element:

```html
Expand All @@ -56,17 +58,17 @@ In case a lazyload image was hidden and then shown via JS the method ``lazySizes

```js
lazySizes.updateAllLazy();
````
```

####``lazySizes.unveilLazy(DOMNode)```
####``lazySizes.unveilLazy(DOMNode)``

In case a developer wants to show an image even if it is not inside the viewport the ``lazySizes.unveilLazy(DOMNode)`` can be called:

```js
lazySizes.unveilLazy(imgElem);
```

####``lazySizes.updateAllSizes()```
####``lazySizes.updateAllSizes()``

In case one or more image elements with the attribute ``data-sizes`` have changed in size ``lazySizes.updateAllSizes`` can be called (For example to implement element queries):

Expand Down
261 changes: 261 additions & 0 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,32 @@
-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;
}
</style>
<script>
document.createElement('picture');
Expand Down Expand Up @@ -346,6 +372,241 @@ <h3>Widgets/Javascript/Script</h3>
&lt;!-- widget content --&gt;
&lt;div&gt;
</pre>
<p>lazysizes automatically detects new elements, but in case a <code>.lazyload</code> element was hidden and then shown via JS, the method <code>lazySizes.updateAllLazy</code> should be called. Example for the bootstrap carousel:</p>
<pre>$(document).on('slide.bs.carousel', function(){
lazySizes.updateAllLazy();
});
</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"
src="https://farm6.staticflickr.com/5531/9638435181_7e3e44c2b8_m.jpg"
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,
https://farm6.staticflickr.com/5531/9638435181_ecbab20fc0_h.jpg 1600w,
https://farm6.staticflickr.com/5531/9638435181_9da37d35d4_k.jpg 2048w,
https://farm6.staticflickr.com/5531/9638435181_6b5ed94330_o.jpg 3648w"
alt="Desert Road" />
</div>
</div>
<div class="scroll-item">
<div class="thumbnail">
<img
data-sizes="auto"
class="lazyload"
src="https://farm5.staticflickr.com/4078/5441060528_31db7838ba_m.jpg"
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,
https://farm5.staticflickr.com/4078/5441060528_b066ce464a_o.jpg 1932w"
alt="" />
</div>
</div>
<div class="scroll-item">
<div class="thumbnail">
<img
data-sizes="auto"
class="lazyload"
src="https://farm9.staticflickr.com/8200/8248153196_7a7664e147_m.jpg"
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,
https://farm9.staticflickr.com/8200/8248153196_439515a267_h.jpg 1600w,
https://farm9.staticflickr.com/8200/8248153196_891960c5f5_k.jpg 2048w,
https://farm9.staticflickr.com/8200/8248153196_c259fd3d58_o.jpg 9910w"
alt="@ The Desert Tortoise Natural Area" />
</div>
</div>
<div class="scroll-item">
<div class="thumbnail">
<img
data-sizes="auto"
class="lazyload"
src="https://farm1.staticflickr.com/113/284651694_69e63b374d_m.jpg"
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"
alt="Woman in water" />
</div>
</div>
<div class="scroll-item">
<div class="thumbnail">
<img
data-sizes="auto"
class="lazyload"
src="https://farm3.staticflickr.com/2401/2171553538_37d0a133da_m.jpg"
data-srcset="https://farm3.staticflickr.com/2401/2171553538_37d0a133da_m.jpg 240w,
https://farm3.staticflickr.com/2401/2171553538_37d0a133da.jpg 500w,
https://farm3.staticflickr.com/2401/2171553538_37d0a133da_z.jpg?zz=1 640w"
alt="Borobudur" />
</div>
</div>
<div class="scroll-item">
<div class="thumbnail">
<img
data-sizes="auto"
class="lazyload"
src="https://farm1.staticflickr.com/17/92230866_713ae1eeef_n.jpg"
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,
https://farm1.staticflickr.com/17/92230866_713ae1eeef_b.jpg 768w,
https://farm1.staticflickr.com/17/92230866_713ae1eeef_o.jpg 1536w"
alt="A tree in the blue" />
</div>
</div>
<div class="scroll-item">
<div class="thumbnail">
<img
data-sizes="auto"
class="lazyload"
src="https://farm1.staticflickr.com/192/504251019_ffc94c77b5_n.jpg"
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,
https://farm1.staticflickr.com/192/504251019_ffc94c77b5_b.jpg 768w,
https://farm1.staticflickr.com/192/504251019_af1d042c1a_o.jpg 1944w"
alt="Windows on Istanbul" />
</div>
</div>
<div class="scroll-item">
<div class="thumbnail">
<img
data-sizes="auto"
class="lazyload"
src="https://farm6.staticflickr.com/5139/5546134597_0b19627066_m.jpg"
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,
https://farm6.staticflickr.com/5139/5546134597_0b19627066_z.jpg 640w,
https://farm6.staticflickr.com/5139/5546134597_0b19627066_b.jpg 1024w,
https://farm6.staticflickr.com/5139/5546134597_82084e246c_o.jpg 2844w"
alt="Goldie Dawn" />
</div>
</div>
<div class="scroll-item">
<div class="thumbnail">
<img
data-sizes="auto"
class="lazyload"
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"
alt="Sant Miquel del Fai" />
</div>
</div>
<div class="scroll-item">
<div class="thumbnail">
<img
data-sizes="auto"
class="lazyload"
src="https://farm3.staticflickr.com/2727/4393975099_c212622aa0_m.jpg"
data-srcset="https://farm3.staticflickr.com/2727/4393975099_c212622aa0_m.jpg 240w,
https://farm3.staticflickr.com/2727/4393975099_c212622aa0_n.jpg 320w,
https://farm3.staticflickr.com/2727/4393975099_c212622aa0_z.jpg 640w,
https://farm3.staticflickr.com/2727/4393975099_c212622aa0_b.jpg 1024w,
https://farm3.staticflickr.com/2727/4393975099_4413ef4037_o.jpg 1600w"
alt="Avebury Stone Circle" />
</div>
</div>
<div class="scroll-item">
<div class="thumbnail">
<img
data-sizes="auto"
class="lazyload"
src="https://farm4.staticflickr.com/3059/2835191823_e3636abb34_m.jpg"
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,
https://farm4.staticflickr.com/3059/2835191823_c3bdbcbbee_o.jpg 3028w"
alt="el castil de tierra" />
</div>
</div>
<div class="scroll-item">
<div class="thumbnail">
<img
data-sizes="auto"
class="lazyload"
src="https://farm8.staticflickr.com/7356/11122919374_55294abec3_m.jpg"
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,
https://farm8.staticflickr.com/7356/11122919374_55294abec3_z.jpg 640w,
https://farm8.staticflickr.com/7356/11122919374_55294abec3_c.jpg 800w,
https://farm8.staticflickr.com/7356/11122919374_55294abec3_b.jpg 1024w,
https://farm8.staticflickr.com/7356/11122919374_dba478083f_h.jpg 1600w,
https://farm8.staticflickr.com/7356/11122919374_237fb819f1_k.jpg 2048w,
https://farm8.staticflickr.com/7356/11122919374_58ccd9e84c_o.jpg 3294w"
alt="sunset" />
</div>
</div>
<div class="scroll-item">
<div class="thumbnail">
<img
data-sizes="auto"
class="lazyload"
src="https://farm6.staticflickr.com/5506/11122805655_e63cb3a9fc_m.jpg"
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,
https://farm6.staticflickr.com/5506/11122805655_e63cb3a9fc_z.jpg 640w,
https://farm6.staticflickr.com/5506/11122805655_e63cb3a9fc_c.jpg 800w,
https://farm6.staticflickr.com/5506/11122805655_e63cb3a9fc_b.jpg 1024w,
https://farm6.staticflickr.com/5506/11122805655_2992b75835_h.jpg 1600w,
https://farm6.staticflickr.com/5506/11122805655_a6418efdc5_k.jpg 2048w,
https://farm6.staticflickr.com/5506/11122805655_c2bf7d14ea_o.jpg 3008w"
alt="Sky and earth" />
</div>
</div>
<div class="scroll-item">
<div class="thumbnail">
<img
data-sizes="auto"
class="lazyload"
src="https://farm4.staticflickr.com/3023/2994603808_a3036a3cdf_n.jpg"
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,
https://farm4.staticflickr.com/3023/2994603808_a3036a3cdf_b.jpg 768w,
https://farm4.staticflickr.com/3023/2994603808_8ac98ed34d_o.jpg 3648w"
alt="Missing Ulsoor lake (Explore)" />
</div>
</div>
<div class="scroll-item">
<div class="thumbnail">
<img
data-sizes="auto"
class="lazyload"
src="https://farm7.staticflickr.com/6211/6254520191_c7868f3a5d_n.jpg"
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,
https://farm7.staticflickr.com/6211/6254520191_c7868f3a5d_b.jpg 725w,
https://farm7.staticflickr.com/6211/6254520191_6878432c01_o.jpg 3407w"
alt="Oxford Path 2" />
</div>
</div>
</div>
</div>
Expand Down
12 changes: 9 additions & 3 deletions lazysizes.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,9 +24,9 @@
var setImmediate = window.setImmediate || window.setTimeout;
var scriptUrls = {};
var unveilAfterLoad = function(e){
unveilLazy(e.target, true);
e.target.removeEventListener('load', unveilAfterLoad, false);
e.target.removeEventListener('error', unveilAfterLoad, false);
unveilLazy(e.target, true);
};

if(document.documentElement.classList){
Expand Down Expand Up @@ -84,6 +84,8 @@
}
}
respimage({reparse: true, elements: [el]});
} else if(!window.HTMLPictureElement && window.console){
console.log('Please use a responsive image polyfill, like respimage or picturefill. https://github.com/aFarkas/respimage');
}
}

Expand Down Expand Up @@ -130,7 +132,7 @@
checkTime++;
if(2 < checkTime && i < len - 1 && Date.now() - now > 9){
globalLazyIndex = i + 1;
globalLazyTimer = setTimeout(evalLazyElements, 33);
globalLazyTimer = setTimeout(evalLazyElements, 20);
break;
}
}
Expand Down Expand Up @@ -166,6 +168,7 @@
if(nodeName != 'script'){
parent.removeChild(dummyEl);
} else {
dummyEl.removeAttribute('data-src');
setImmediate(function(){
removeClass(dummyEl, 'lazyload');
});
Expand Down Expand Up @@ -226,6 +229,9 @@
elem.setAttribute('sizes', sizes);
}
elem.removeAttribute('data-sizes');
if (!srcset && window.console && elem.getAttribute('srcset')){
console.log('using lazysizes with a `srcset` attribute is not good. Use `data-srcset` instead');
}
}

if(srcset){
Expand Down Expand Up @@ -279,7 +285,7 @@

if(i > checkTime && i < len - 1 && Date.now() - now > 9){
globalSizesIndex = i + 1;
globalSizesTimer = setTimeout(evalSizesElements, 33);
globalSizesTimer = setTimeout(evalSizesElements, 20);
break;
}
}
Expand Down
Loading

0 comments on commit 554a56a

Please sign in to comment.