Skip to content

Commit 554a56a

Browse files
author
aFarkas
committed
update
1 parent 4a47599 commit 554a56a

File tree

4 files changed

+277
-8
lines changed

4 files changed

+277
-8
lines changed

‎README.md

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,8 @@ As a nice bonus lazysizes supports setting the ``sizes`` attribute automatically
3434
responsive-image3.jpg 900w" class="lazyload" />
3535
```
3636

37+
**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.
38+
3739
For JS off support simply use a ``span`` or ``div`` element as a wrapper for a ``noscript`` element:
3840

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

5759
```js
5860
lazySizes.updateAllLazy();
59-
````
61+
```
6062

61-
####``lazySizes.unveilLazy(DOMNode)```
63+
####``lazySizes.unveilLazy(DOMNode)``
6264

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

6567
```js
6668
lazySizes.unveilLazy(imgElem);
6769
```
6870

69-
####``lazySizes.updateAllSizes()```
71+
####``lazySizes.updateAllSizes()``
7072

7173
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):
7274

‎index.html

Lines changed: 261 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,32 @@
3232
-moz-tab-size: 2;
3333
tab-size: 2;
3434
}
35+
36+
.scroll-view {
37+
overflow: auto;
38+
overflow-x: auto;
39+
overflow-y: hidden;
40+
position: relative;
41+
width: 100%;
42+
padding: 2px 2px 10px;
43+
}
44+
.scroll-doc {
45+
display: table;
46+
position: relative;
47+
text-align: left;
48+
}
49+
.scroll-item {
50+
display: table-cell;
51+
vertical-align: middle;
52+
}
53+
.scroll-item .thumbnail {
54+
margin: 5px 10px;
55+
width: 230px;
56+
}
57+
.scroll-item .thumbnail img {
58+
width: 100%;
59+
height: auto;
60+
}
3561
</style>
3662
<script>
3763
document.createElement('picture');
@@ -346,6 +372,241 @@ <h3>Widgets/Javascript/Script</h3>
346372
&lt;!-- widget content --&gt;
347373
&lt;div&gt;
348374
</pre>
375+
<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>
376+
<pre>$(document).on('slide.bs.carousel', function(){
377+
lazySizes.updateAllLazy();
378+
});
379+
</pre>
380+
</div>
381+
</div>
382+
</div>
383+
</div>
384+
<div class="row">
385+
<div class="scroll-view">
386+
<div class="scroll-doc">
387+
<div class="scroll-item">
388+
<div class="thumbnail">
389+
<img
390+
data-sizes="auto"
391+
class="lazyload"
392+
src="https://farm6.staticflickr.com/5531/9638435181_7e3e44c2b8_m.jpg"
393+
data-srcset="https://farm6.staticflickr.com/5531/9638435181_7e3e44c2b8_m.jpg 240w,
394+
https://farm6.staticflickr.com/5531/9638435181_7e3e44c2b8_n.jpg 320w,
395+
https://farm6.staticflickr.com/5531/9638435181_7e3e44c2b8.jpg 500w,
396+
https://farm6.staticflickr.com/5531/9638435181_7e3e44c2b8_z.jpg 640w,
397+
https://farm6.staticflickr.com/5531/9638435181_7e3e44c2b8_c.jpg 800w,
398+
https://farm6.staticflickr.com/5531/9638435181_7e3e44c2b8_b.jpg 1024w,
399+
https://farm6.staticflickr.com/5531/9638435181_ecbab20fc0_h.jpg 1600w,
400+
https://farm6.staticflickr.com/5531/9638435181_9da37d35d4_k.jpg 2048w,
401+
https://farm6.staticflickr.com/5531/9638435181_6b5ed94330_o.jpg 3648w"
402+
alt="Desert Road" />
403+
</div>
404+
</div>
405+
<div class="scroll-item">
406+
<div class="thumbnail">
407+
<img
408+
data-sizes="auto"
409+
class="lazyload"
410+
src="https://farm5.staticflickr.com/4078/5441060528_31db7838ba_m.jpg"
411+
data-srcset="https://farm5.staticflickr.com/4078/5441060528_31db7838ba_m.jpg 240w,
412+
https://farm5.staticflickr.com/4078/5441060528_31db7838ba_n.jpg 320w,
413+
https://farm5.staticflickr.com/4078/5441060528_31db7838ba.jpg 500w,
414+
https://farm5.staticflickr.com/4078/5441060528_31db7838ba_z.jpg 640w,
415+
https://farm5.staticflickr.com/4078/5441060528_31db7838ba_b.jpg 1024w,
416+
https://farm5.staticflickr.com/4078/5441060528_b066ce464a_o.jpg 1932w"
417+
alt="" />
418+
</div>
419+
</div>
420+
<div class="scroll-item">
421+
<div class="thumbnail">
422+
<img
423+
data-sizes="auto"
424+
class="lazyload"
425+
src="https://farm9.staticflickr.com/8200/8248153196_7a7664e147_m.jpg"
426+
data-srcset="https://farm9.staticflickr.com/8200/8248153196_7a7664e147_m.jpg 240w,
427+
https://farm9.staticflickr.com/8200/8248153196_7a7664e147_n.jpg 320w,
428+
https://farm9.staticflickr.com/8200/8248153196_7a7664e147.jpg 500w,
429+
https://farm9.staticflickr.com/8200/8248153196_7a7664e147_c.jpg 800w,
430+
https://farm9.staticflickr.com/8200/8248153196_7a7664e147_b.jpg 1024w,
431+
https://farm9.staticflickr.com/8200/8248153196_439515a267_h.jpg 1600w,
432+
https://farm9.staticflickr.com/8200/8248153196_891960c5f5_k.jpg 2048w,
433+
https://farm9.staticflickr.com/8200/8248153196_c259fd3d58_o.jpg 9910w"
434+
alt="@ The Desert Tortoise Natural Area" />
435+
</div>
436+
</div>
437+
<div class="scroll-item">
438+
<div class="thumbnail">
439+
<img
440+
data-sizes="auto"
441+
class="lazyload"
442+
src="https://farm1.staticflickr.com/113/284651694_69e63b374d_m.jpg"
443+
data-srcset="https://farm1.staticflickr.com/113/284651694_69e63b374d_m.jpg 240w,
444+
https://farm1.staticflickr.com/113/284651694_69e63b374d.jpg 500w,
445+
https://farm1.staticflickr.com/113/284651694_69e63b374d_z.jpg?zz=1 640w,
446+
https://farm1.staticflickr.com/113/284651694_69e63b374d_o.jpg 800w"
447+
alt="Woman in water" />
448+
</div>
449+
</div>
450+
<div class="scroll-item">
451+
<div class="thumbnail">
452+
<img
453+
data-sizes="auto"
454+
class="lazyload"
455+
src="https://farm3.staticflickr.com/2401/2171553538_37d0a133da_m.jpg"
456+
data-srcset="https://farm3.staticflickr.com/2401/2171553538_37d0a133da_m.jpg 240w,
457+
https://farm3.staticflickr.com/2401/2171553538_37d0a133da.jpg 500w,
458+
https://farm3.staticflickr.com/2401/2171553538_37d0a133da_z.jpg?zz=1 640w"
459+
alt="Borobudur" />
460+
</div>
461+
</div>
462+
<div class="scroll-item">
463+
<div class="thumbnail">
464+
<img
465+
data-sizes="auto"
466+
class="lazyload"
467+
src="https://farm1.staticflickr.com/17/92230866_713ae1eeef_n.jpg"
468+
data-srcset="https://farm1.staticflickr.com/17/92230866_713ae1eeef_n.jpg 240w,
469+
https://farm1.staticflickr.com/17/92230866_713ae1eeef.jpg 375w,
470+
https://farm1.staticflickr.com/17/92230866_713ae1eeef_z.jpg 480w,
471+
https://farm1.staticflickr.com/17/92230866_713ae1eeef_b.jpg 768w,
472+
https://farm1.staticflickr.com/17/92230866_713ae1eeef_o.jpg 1536w"
473+
alt="A tree in the blue" />
474+
</div>
475+
</div>
476+
<div class="scroll-item">
477+
<div class="thumbnail">
478+
<img
479+
data-sizes="auto"
480+
class="lazyload"
481+
src="https://farm1.staticflickr.com/192/504251019_ffc94c77b5_n.jpg"
482+
data-srcset="https://farm1.staticflickr.com/192/504251019_ffc94c77b5_n.jpg 240w,
483+
https://farm1.staticflickr.com/192/504251019_ffc94c77b5.jpg 375w,
484+
https://farm1.staticflickr.com/192/504251019_ffc94c77b5_z.jpg 480w,
485+
https://farm1.staticflickr.com/192/504251019_ffc94c77b5_b.jpg 768w,
486+
https://farm1.staticflickr.com/192/504251019_af1d042c1a_o.jpg 1944w"
487+
alt="Windows on Istanbul" />
488+
</div>
489+
</div>
490+
<div class="scroll-item">
491+
<div class="thumbnail">
492+
<img
493+
data-sizes="auto"
494+
class="lazyload"
495+
src="https://farm6.staticflickr.com/5139/5546134597_0b19627066_m.jpg"
496+
data-srcset="https://farm6.staticflickr.com/5139/5546134597_0b19627066_m.jpg 240w,
497+
https://farm6.staticflickr.com/5139/5546134597_0b19627066_n.jpg 320w,
498+
https://farm6.staticflickr.com/5139/5546134597_0b19627066.jpg 500w,
499+
https://farm6.staticflickr.com/5139/5546134597_0b19627066_z.jpg 640w,
500+
https://farm6.staticflickr.com/5139/5546134597_0b19627066_b.jpg 1024w,
501+
https://farm6.staticflickr.com/5139/5546134597_82084e246c_o.jpg 2844w"
502+
alt="Goldie Dawn" />
503+
</div>
504+
</div>
505+
<div class="scroll-item">
506+
<div class="thumbnail">
507+
<img
508+
data-sizes="auto"
509+
class="lazyload"
510+
src="https://farm3.staticflickr.com/2377/1657712955_131576bcd8_m.jpg"
511+
data-srcset="https://farm3.staticflickr.com/2377/1657712955_131576bcd8_m.jpg 240w,
512+
https://farm3.staticflickr.com/2377/1657712955_131576bcd8.jpg 500w,
513+
https://farm3.staticflickr.com/2377/1657712955_131576bcd8_z.jpg?zz=1 640w,
514+
https://farm3.staticflickr.com/2377/1657712955_1b941645fd_o.jpg 800w"
515+
alt="Sant Miquel del Fai" />
516+
</div>
517+
</div>
518+
<div class="scroll-item">
519+
<div class="thumbnail">
520+
<img
521+
data-sizes="auto"
522+
class="lazyload"
523+
src="https://farm3.staticflickr.com/2727/4393975099_c212622aa0_m.jpg"
524+
data-srcset="https://farm3.staticflickr.com/2727/4393975099_c212622aa0_m.jpg 240w,
525+
https://farm3.staticflickr.com/2727/4393975099_c212622aa0_n.jpg 320w,
526+
https://farm3.staticflickr.com/2727/4393975099_c212622aa0_z.jpg 640w,
527+
https://farm3.staticflickr.com/2727/4393975099_c212622aa0_b.jpg 1024w,
528+
https://farm3.staticflickr.com/2727/4393975099_4413ef4037_o.jpg 1600w"
529+
alt="Avebury Stone Circle" />
530+
</div>
531+
</div>
532+
<div class="scroll-item">
533+
<div class="thumbnail">
534+
<img
535+
data-sizes="auto"
536+
class="lazyload"
537+
src="https://farm4.staticflickr.com/3059/2835191823_e3636abb34_m.jpg"
538+
data-srcset="https://farm4.staticflickr.com/3059/2835191823_e3636abb34_m.jpg 240w,
539+
https://farm4.staticflickr.com/3059/2835191823_e3636abb34_n.jpg 320w,
540+
https://farm4.staticflickr.com/3059/2835191823_e3636abb34.jpg 500w,
541+
https://farm4.staticflickr.com/3059/2835191823_e3636abb34_z.jpg 640w,
542+
https://farm4.staticflickr.com/3059/2835191823_e3636abb34_b.jpg 1024w,
543+
https://farm4.staticflickr.com/3059/2835191823_c3bdbcbbee_o.jpg 3028w"
544+
alt="el castil de tierra" />
545+
</div>
546+
</div>
547+
<div class="scroll-item">
548+
<div class="thumbnail">
549+
<img
550+
data-sizes="auto"
551+
class="lazyload"
552+
src="https://farm8.staticflickr.com/7356/11122919374_55294abec3_m.jpg"
553+
data-srcset="https://farm8.staticflickr.com/7356/11122919374_55294abec3_m.jpg 240w,
554+
https://farm8.staticflickr.com/7356/11122919374_55294abec3_n.jpg 320w,
555+
https://farm8.staticflickr.com/7356/11122919374_55294abec3.jpg 500w,
556+
https://farm8.staticflickr.com/7356/11122919374_55294abec3_z.jpg 640w,
557+
https://farm8.staticflickr.com/7356/11122919374_55294abec3_c.jpg 800w,
558+
https://farm8.staticflickr.com/7356/11122919374_55294abec3_b.jpg 1024w,
559+
https://farm8.staticflickr.com/7356/11122919374_dba478083f_h.jpg 1600w,
560+
https://farm8.staticflickr.com/7356/11122919374_237fb819f1_k.jpg 2048w,
561+
https://farm8.staticflickr.com/7356/11122919374_58ccd9e84c_o.jpg 3294w"
562+
alt="sunset" />
563+
</div>
564+
</div>
565+
<div class="scroll-item">
566+
<div class="thumbnail">
567+
<img
568+
data-sizes="auto"
569+
class="lazyload"
570+
src="https://farm6.staticflickr.com/5506/11122805655_e63cb3a9fc_m.jpg"
571+
data-srcset="https://farm6.staticflickr.com/5506/11122805655_e63cb3a9fc_m.jpg 240w,
572+
https://farm6.staticflickr.com/5506/11122805655_e63cb3a9fc_n.jpg 320w,
573+
https://farm6.staticflickr.com/5506/11122805655_e63cb3a9fc.jpg 500w,
574+
https://farm6.staticflickr.com/5506/11122805655_e63cb3a9fc_z.jpg 640w,
575+
https://farm6.staticflickr.com/5506/11122805655_e63cb3a9fc_c.jpg 800w,
576+
https://farm6.staticflickr.com/5506/11122805655_e63cb3a9fc_b.jpg 1024w,
577+
https://farm6.staticflickr.com/5506/11122805655_2992b75835_h.jpg 1600w,
578+
https://farm6.staticflickr.com/5506/11122805655_a6418efdc5_k.jpg 2048w,
579+
https://farm6.staticflickr.com/5506/11122805655_c2bf7d14ea_o.jpg 3008w"
580+
alt="Sky and earth" />
581+
</div>
582+
</div>
583+
<div class="scroll-item">
584+
<div class="thumbnail">
585+
<img
586+
data-sizes="auto"
587+
class="lazyload"
588+
src="https://farm4.staticflickr.com/3023/2994603808_a3036a3cdf_n.jpg"
589+
data-srcset="https://farm4.staticflickr.com/3023/2994603808_a3036a3cdf_n.jpg 240w,
590+
https://farm4.staticflickr.com/3023/2994603808_a3036a3cdf.jpg 375w,
591+
https://farm4.staticflickr.com/3023/2994603808_a3036a3cdf_z.jpg 480w,
592+
https://farm4.staticflickr.com/3023/2994603808_a3036a3cdf_b.jpg 768w,
593+
https://farm4.staticflickr.com/3023/2994603808_8ac98ed34d_o.jpg 3648w"
594+
alt="Missing Ulsoor lake (Explore)" />
595+
</div>
596+
</div>
597+
<div class="scroll-item">
598+
<div class="thumbnail">
599+
<img
600+
data-sizes="auto"
601+
class="lazyload"
602+
src="https://farm7.staticflickr.com/6211/6254520191_c7868f3a5d_n.jpg"
603+
data-srcset="https://farm7.staticflickr.com/6211/6254520191_c7868f3a5d_n.jpg 227w,
604+
https://farm7.staticflickr.com/6211/6254520191_c7868f3a5d.jpg 354w,
605+
https://farm7.staticflickr.com/6211/6254520191_c7868f3a5d_z.jpg 453w,
606+
https://farm7.staticflickr.com/6211/6254520191_c7868f3a5d_b.jpg 725w,
607+
https://farm7.staticflickr.com/6211/6254520191_6878432c01_o.jpg 3407w"
608+
alt="Oxford Path 2" />
609+
</div>
349610
</div>
350611
</div>
351612
</div>

‎lazysizes.js

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -24,9 +24,9 @@
2424
var setImmediate = window.setImmediate || window.setTimeout;
2525
var scriptUrls = {};
2626
var unveilAfterLoad = function(e){
27-
unveilLazy(e.target, true);
2827
e.target.removeEventListener('load', unveilAfterLoad, false);
2928
e.target.removeEventListener('error', unveilAfterLoad, false);
29+
unveilLazy(e.target, true);
3030
};
3131

3232
if(document.documentElement.classList){
@@ -84,6 +84,8 @@
8484
}
8585
}
8686
respimage({reparse: true, elements: [el]});
87+
} else if(!window.HTMLPictureElement && window.console){
88+
console.log('Please use a responsive image polyfill, like respimage or picturefill. https://github.com/aFarkas/respimage');
8789
}
8890
}
8991

@@ -130,7 +132,7 @@
130132
checkTime++;
131133
if(2 < checkTime && i < len - 1 && Date.now() - now > 9){
132134
globalLazyIndex = i + 1;
133-
globalLazyTimer = setTimeout(evalLazyElements, 33);
135+
globalLazyTimer = setTimeout(evalLazyElements, 20);
134136
break;
135137
}
136138
}
@@ -166,6 +168,7 @@
166168
if(nodeName != 'script'){
167169
parent.removeChild(dummyEl);
168170
} else {
171+
dummyEl.removeAttribute('data-src');
169172
setImmediate(function(){
170173
removeClass(dummyEl, 'lazyload');
171174
});
@@ -226,6 +229,9 @@
226229
elem.setAttribute('sizes', sizes);
227230
}
228231
elem.removeAttribute('data-sizes');
232+
if (!srcset && window.console && elem.getAttribute('srcset')){
233+
console.log('using lazysizes with a `srcset` attribute is not good. Use `data-srcset` instead');
234+
}
229235
}
230236

231237
if(srcset){
@@ -279,7 +285,7 @@
279285

280286
if(i > checkTime && i < len - 1 && Date.now() - now > 9){
281287
globalSizesIndex = i + 1;
282-
globalSizesTimer = setTimeout(evalSizesElements, 33);
288+
globalSizesTimer = setTimeout(evalSizesElements, 20);
283289
break;
284290
}
285291
}

0 commit comments

Comments
 (0)