Skip to content

Commit

Permalink
documentation + improvements
Browse files Browse the repository at this point in the history
  • Loading branch information
aFarkas committed Jul 8, 2015
1 parent 610aaf3 commit 52e371d
Show file tree
Hide file tree
Showing 9 changed files with 36 additions and 35 deletions.
1 change: 1 addition & 0 deletions .npmignore
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ bower_components
/plato-report
index.html
no-src.html
user-developer-experience.html
animate.html
Gruntfile.js
component.json
Expand Down
2 changes: 1 addition & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -181,7 +181,7 @@ Here the list of options:
* ``lazySizesConfig.preloadClass`` (default: ``"lazypreload"``): Marker class for elements which should be lazy pre-loaded after onload. Those elements will be even preloaded, if the ``preloadAfterLoad`` option is set to ``false``. Note: This *class* can be also dynamically set (``$currentSlide.next().find('.lazyload').addClass('lazypreload');``).
* ``lazySizesConfig.loadingClass`` (default: ``"lazyloading"``): This ``class`` will be added to ``img`` element as soon as image loading starts. Can be used to add unveil effects.
* ``lazySizesConfig.loadedClass`` (default: ``"lazyloaded"``): This ``class`` will be added to any element as soon as the image is loaded or the image comes into view. Can be used to add unveil effects or to apply styles.
* ``lazySizesConfig.expand`` (default: ``360``): The ``expand`` option expands the calculated visual viewport area in all directions, so that elements can be loaded before they are becoming visible. (Note: Reasonable values are between ``60`` and ``1000`` (depending on the ``expFactor`` option.) In case you have a lot of small images or you are using the LQIP pattern you can lower the value, in case you have larger images set it to a higher value. Also note, that lazySizes will dynamically shrink this value to ``0``, if the browser is currently downloading and expand it if the browser network is currently idling and the user not scrolling (by multiplying the ``expand`` option with ``2`` (``expFactor``)). This option can be overridden with the ``[data-expand]`` attribute.
* ``lazySizesConfig.expand`` (default: ``360``): The ``expand`` option expands the calculated visual viewport area in all directions, so that elements can be loaded before they are becoming visible. (Note: Reasonable values are between ``100`` and ``1000`` (depending on the ``expFactor`` option.) In case you have a lot of small images or you are using the LQIP pattern you can lower the value, in case you have larger images set it to a higher value. Also note, that lazySizes will dynamically shrink this value to ``0``, if the browser is currently downloading and expand it if the browser network is currently idling and the user not scrolling (by multiplying the ``expand`` option with ``2`` (``expFactor``)). This option can be overridden with the ``[data-expand]`` attribute.
```js
window.lazySizesConfig = window.lazySizesConfig || {};
//set expand to a higher value on larger displays
Expand Down
8 changes: 4 additions & 4 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -124,8 +124,8 @@
<script>
window.lazySizesConfig = window.lazySizesConfig || {};
window.lazySizesConfig.loadMode = 1;
//window.lazySizesConfig.preloadAfterLoad = true;
//window.lazySizesConfig.expand = 80;
//window.lazySizesConfig.expand = 480;
//window.lazySizesConfig.expFactor = 1.6;
</script>

<script src="plugins/unveilhooks/ls.unveilhooks.min.js" async=""></script>
Expand Down Expand Up @@ -417,7 +417,7 @@ <h3>First slide label</h3>
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"
data-sizes="auto"
class="lazyload" />
</div>
<div class="carousel-caption">
Expand All @@ -427,7 +427,7 @@ <h3>Second slide label</h3>
</div>
<div class="item active">
<div class="intrinsic">
<img alt="100%x200"
<img alt="100%x200"
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,
Expand Down
13 changes: 7 additions & 6 deletions lazysizes.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -114,8 +114,8 @@

running = true;

if(delay < 9){
delay = 9;
if(delay < 6){
delay = 6;
}
setTimeout(getAF, delay);
};
Expand All @@ -137,7 +137,7 @@
var currentExpand = 0;

var isLoading = 0;
var lowRuns = 1;
var lowRuns = 0;

var resetPreloading = function(e){
isLoading--;
Expand Down Expand Up @@ -221,6 +221,7 @@
((isCompleted && isLoading < 3 && !elemExpandVal && (loadMode < 3 || lowRuns < 4)) || isNestedVisible(lazyloadElems[i], elemExpand))){
unveilElement(lazyloadElems[i], rect.width);
loadedSomething = true;
if(isLoading > 9){break;}
} else if(!loadedSomething && isCompleted && !autoLoadElem &&
isLoading < 3 && lowRuns < 4 && loadMode > 2 &&
(preloadElems[0] || lazySizesConfig.preloadAfterLoad) &&
Expand Down Expand Up @@ -446,11 +447,11 @@
document.addEventListener(name, throttledCheckElements, true);
});

if(!(isCompleted = /d$|^c/.test(document.readyState))){
if((/d$|^c/.test(document.readyState))){
onload();
} else {
addEventListener('load', onload);
document.addEventListener('DOMContentLoaded', throttledCheckElements);
} else {
onload();
}

throttledCheckElements();
Expand Down
2 changes: 1 addition & 1 deletion lazysizes.min.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

30 changes: 15 additions & 15 deletions plugins/optimumx/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -126,23 +126,23 @@ For native images support the ``picture`` element can be used to achieve the res
```html
<picture>
<!--[if IE 9]><video style="display: none;"><![endif]-->
<source
data-srcset="image-w1600-q60.jpg 1600w,
image-w1440-q50.jpg 1440w,
image-w1200-q50.jpg 1200w,
image-w800-q50.jpg 800w,
image-w600-q50.jpg 600w,
image-w400-q50.jpg 400w"
media="(-webkit-min-device-pixel-ratio: 1.9),
(min-resolution: 1.9dppx)" />
<source
data-srcset="image-w1600-q50.jpg 1600w,
image-w1440-q50.jpg 1440w,
image-w1200-q50.jpg 1200w,
image-w800-q50.jpg 800w,
image-w600-q50.jpg 600w"
media="(-webkit-min-device-pixel-ratio: 1.9),
(min-resolution: 1.9dppx)" />
<source
data-srcset="image-w1440-q80.jpg 1440w,
image-w1200-q80.jpg 1200w,
image-w800-q80.jpg 800w,
image-w600-q80.jpg 600w,
image-w400-q80.jpg 400w" />
<!--[if IE 9]></video><![endif]-->
<img
data-srcset="w1600-q80.jpg 1600w,
image-w1440-q80.jpg 1440w,
image-w1200-q80.jpg 1200w,
image-w800-q80.jpg 800w,
image-w600-q80.jpg 600w,
image-w400-q80.jpg 400w"
src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
data-sizes="auto"
class="lazyload"
alt="picture but without artdirection" />
Expand Down
2 changes: 1 addition & 1 deletion plugins/rias/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -90,7 +90,7 @@ All RiAS options can also be used as a {placeholder} inside the url.
###List of Options

* ``lazySizesConfig.rias.srcAttr`` (default: ``"data-src"``): The attribute, which should be transformed to ``src``/``srcset``. (The extension will also automatically check the ``lazySizesConfig.srcsetAttr`` and ``lazySizesConfig.srcAttr``)
* ``lazySizesConfig.rias.widths`` (``array of numbers``): The widths option reduces the calculated ``width`` to the allowed widths. The numeric width can also be simply mapped to a string (i.e.: small, medium, large) using the ``widthmap`` option. The default value is the following array: ``[96, 160, 320, 480, 640, 800, 960, 1280, 1600, 1920, 2240, 2560, 2880]``.
* ``lazySizesConfig.rias.widths`` (``array of numbers``): The widths option reduces the calculated ``width`` to the allowed widths. The numeric width can also be simply mapped to a string (i.e.: small, medium, large) using the ``widthmap`` option. The default value is the following array: ``[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 1944, 2160, 2376, 2592, 2808, 3024]``.
* ``lazySizesConfig.rias.widthmap`` (``{}``): The widthmap option allows you to simply transform a numeric width to a string.
```js
window.lazySizesConfig = window.lazySizesConfig || {};
Expand Down
11 changes: 5 additions & 6 deletions plugins/rias/ls.rias.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,13 +51,12 @@
(function (widths){
var width;
var i = 0;
widths.push(96);
while(!width || width < 2800){
i += 10;
if(i > 60){
i += 10;
while(!width || width < 3000){
i += 5;
if(i > 30){
i += 1;
}
width = (16 * i);
width = (36 * i);
widths.push(width);
}
})(riasCfg.widths);
Expand Down
Loading

0 comments on commit 52e371d

Please sign in to comment.