Skip to content

Commit

Permalink
0.7.2
Browse files Browse the repository at this point in the history
  • Loading branch information
aFarkas committed Jan 10, 2015
1 parent b259b98 commit 2d66ccc
Show file tree
Hide file tree
Showing 16 changed files with 111 additions and 134 deletions.
18 changes: 12 additions & 6 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -94,8 +94,6 @@ The LQIP pattern (low quality image placeholder). Simply add a low quality image
<img src="lqip-src.jpg" data-src="image.jpg" class="lazyload" />
```

The LQIP pattern has the following advantages: The lqip-src is not hidden from the preload parser and loads very fast, which leads to an extreme fast first impression and in case of legacy / JS disabled browsers/devices or some searchengines (bots) as a good enough fallback (IE8 and Android 2 devices as also JS disabled).

###Simple pattern

For non crucial or below the fold images or in case you want to save more initial image data the LQIP pattern can't be used (an extreme fuzzy image does neither work as a good enough first impression nor as a fallback), you do use client side rendering (no preload parser advantage) or you can't even generate a LQIP src, simply omit the ``src`` attribute or add a data uri as fallback ``src``.
Expand Down Expand Up @@ -138,7 +136,8 @@ Options can be set by declaring a global configuration option object named ``laz
window.lazySizesConfig = {
lazyClass: 'postbone', // use .postbone instead of .lazyload
// preload all lazy elements in a lazy loading queue after onload, if on desktop
preloadAfterLoad: !(/mobi/i.test(navigator.userAgent))
preloadAfterLoad: !(/mobi/i.test(navigator.userAgent)),
addClasses: true
};
```

Expand Down Expand Up @@ -166,9 +165,8 @@ Here the list of options:
document.addEventListener('lazybeforeunveil', function(e){
var bg = e.target.getAttribute('data-bg');
if(bg){
e.target.style.backgroundImage = bg;
e.target.style.backgroundImage = 'url(' + bg + ')';
e.target.removeAttribute('data-bg');
e.preventDefault();
}
}, false);
```
Expand Down Expand Up @@ -262,6 +260,14 @@ The [RIAS plugin](plugins/rias) plugin enables lazySizes to hook into any third

In general the RIaS plugin combines the simplicity of the famous Imager.js solution with the future power of native responsive images implementations and the webcomponent-like working of lazySizes' ``.lazyload`` elements (self-initialization, self-configuration and self-destroying).

```html
<img
data-src="image-service/w_{width}/image.jpg"
data-sizes="auto"
class="lazyload"
alt="" />
```

###[OPTIMUMX plugin](plugins/optimumx)
The ``srcset`` attribute with the *w* descriptor and ``sizes`` attribute automatically also includes high DPI images. But each image has a different optimal pixel density, which might be lower (1.5x) than the pixel density of your device (2x or 3x). This information is unknown to the browser and therefore can't be optimized for. The [lazySizes optimumx extension](plugins/optimumx) gives you more control to trade between perceived quality vs. perceived performance.

Expand Down Expand Up @@ -310,7 +316,7 @@ To minimize reflows, content jumping or unpredictable behavior with some other J
http://placehold.it/700x300 2x" class="lazyload" />
```

For flexible responsive images the [CSS intrinsic ratio scaling technique](http://alistapart.com/article/creating-intrinsic-ratios-for-video/) can be used:
For flexible responsive images the [CSS intrinsic ratio scaling technique](http://www.mademyday.de/css-height-equals-width-with-pure-css.html) can be used:

```html
<style>
Expand Down
2 changes: 1 addition & 1 deletion bower.json
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "lazysizes",
"repo": "afarkas/lazysizes",
"version": "0.7.2-RC1",
"version": "0.7.2",
"main": "lazysizes.min.js",
"scripts": [
"lazysizes.min.js"
Expand Down
2 changes: 1 addition & 1 deletion component.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "lazysizes",
"version": "0.7.2-RC1",
"version": "0.7.2",
"repo": "afarkas/lazysizes",
"main": "lazysizes.min.js",
"scripts": ["lazysizes.min.js"],
Expand Down
5 changes: 2 additions & 3 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -120,8 +120,7 @@ <h1>lazySizes</h1>

<div class="caption">
<h3>Image with LQIP technique</h3>
<p>The low quality image placeholder pattern is a performance technique. While it might increase measured time until the <code>onload</code> event, it dramatically increases perceived performance.</p>
<p>This pattern is recommended for above the fold/crictical images.</p>
<p>The low quality image placeholder pattern uses a low quality image for the first impression.</p>
<pre>&lt;img
alt="100%x200"
src="low-quality.jpg"
Expand All @@ -141,7 +140,7 @@ <h3>Image with LQIP technique</h3>

<div class="caption">
<h3>Normal lazy image</h3>
<p>The normal image pattern can be used for non-critical/most below the fold images or in case there is no low quality image available:</p>
<p>Of course the low quality image can be simply omitted to save more image data.</p>
<pre>&lt;img class="lazyload" data-src="image.jpg" alt="Desert Road" /&gt;
</pre>
</div>
Expand Down
54 changes: 12 additions & 42 deletions lazysizes.js
Original file line number Diff line number Diff line change
Expand Up @@ -8,13 +8,13 @@
/*jshint eqnull:true */
if(!window.document.getElementsByClassName){return;}

var lazyloadElems, autosizesElems, preloadElems, lazySizesConfig, globalSizesTimer,
var lazyloadElems, autosizesElems, preloadElems, lazySizesConfig,
globalSizesIndex, addClass, removeClass, hasClass, isWinloaded;

var document = window.document;
var docElem = document.documentElement;
var isPreloading = 0;
var fixChrome = window.HTMLPictureElement && navigator.userAgent.match(/hrome\/(\d+)/) && (RegExp.$1 == 40 || RegExp.$1 == 41);
var fixChrome = window.HTMLPictureElement && navigator.userAgent.match(/hrome\/(\d+)/) && (RegExp.$1 == 40);
var supportNativeLQIP = (/blink|webkit/i).test(navigator.userAgent);

var regPicture = /^picture$/i;
Expand Down Expand Up @@ -92,7 +92,6 @@
}

var eLlen, resetPreloadingTimer, eLvW, elvH, eLtop, eLleft, eLright, eLbottom, eLnegativeTreshhold;
var eLnow = Date.now();
var resetPreloading = function(e){
isPreloading--;
if(e && e.target){
Expand Down Expand Up @@ -131,7 +130,7 @@
eLright += expand;

while(visible && (parent = parent.offsetParent) && parent != docElem && parent != document.body){
visible = getCSS(parent, 'opacity') > 0;
visible = (getCSS(parent, 'opacity') || 1) > 0;
if(visible && getCSS(parent, 'overflow') != 'visible'){
outerRect = parent.getBoundingClientRect();
visible = eLright > outerRect.left - 1 &&
Expand All @@ -147,7 +146,6 @@
var evalLazyElements = function (){
var rect, autoLoadElem, loadedSomething;
eLlen = lazyloadElems.length;
eLnow = Date.now();
if(eLlen){
eLvW = innerWidth + inViewThreshold;
elvH = innerHeight + inViewThreshold;
Expand Down Expand Up @@ -180,12 +178,6 @@
(preloadElems[0] || (eLbottom || eLright || eLleft || eLtop) || lazyloadElems[globalLazyIndex].getAttribute(lazySizesConfig.sizesAttr) != 'auto')){
autoLoadElem = preloadElems[0] || lazyloadElems[globalLazyIndex];
}

if(globalLazyIndex < eLlen - 1 && Date.now() - eLnow > 9){
autoLoadElem = false;
setTimeout(evalLazyElements);
break;
}
}
}

Expand Down Expand Up @@ -313,53 +305,36 @@
var timer;
var run = function(){
clearTimeout(timer);
clearSizesTimer();
globalSizesIndex = 0;
evalSizesElements();
};
return function(){
clearTimeout(timer);
clearTimeout(globalSizesTimer);
timer = setTimeout(run, 99);
};
})();

var evalSizesElements = function(){
var checkTime, now, i;
var i;
var len = autosizesElems.length;
if(len){

now = Date.now();
i = globalSizesIndex || 0;
checkTime = i + 3;

clearSizesTimer();

for(; i < len; i++){
updateSizes(autosizesElems[i]);

if(i > checkTime && i < len - 1 && Date.now() - now > 9){
globalSizesIndex = i + 1;

globalSizesTimer = setTimeout(evalSizesElements);
break;
}
}
}
};
var getWidth = function(elem, parent){
var parentWidth, elemWidth, width, alt;
var width, alt;
if(!elem._lazysizesWidth){
alt = elem.getAttribute('alt');
elem.alt = '';
}

parentWidth = parent.offsetWidth;
elemWidth = elem.offsetWidth;
width = (elemWidth >= parentWidth || getCSS(elem, 'display') == 'block') ?
elemWidth :
parentWidth;
width = elem.offsetWidth;

while(parent && parent != document.body && width < lazySizesConfig.minSize && !elem._lazysizesWidth){
while(width < lazySizesConfig.minSize && parent && parent != document.body && !elem._lazysizesWidth){
width = parent.offsetWidth;
parent = parent.parentNode;
}
Expand All @@ -375,11 +350,6 @@
return width;
};

function clearSizesTimer(){
globalSizesIndex = 0;
clearTimeout(globalSizesTimer);
}

function updateSizes(elem, dataAttr){
var width, sources, i, len, event;
var parent = elem.parentNode;
Expand Down Expand Up @@ -413,7 +383,7 @@

var onload = function(){
inViewLow = Math.max( Math.min(lazySizesConfig.threshold || 150, 300), 40 );
inViewHigh = Math.min( inViewLow * 7, Math.max(innerHeight * 1.2, docElem.clientHeight * 1.2, inViewLow * 4) );
inViewHigh = Math.min( inViewLow * 7, Math.max(innerHeight * 1.3, docElem.clientHeight * 1.3, inViewLow * 4) );
isWinloaded = /d$|^c/.test(document.readyState);
inViewThreshold = isWinloaded ? inViewHigh : inViewLow;
};
Expand All @@ -435,7 +405,7 @@
//addClasses: false,
//preloadAfterLoad: false,
onlyLargerSizes: true,
minSize: 33
minSize: 40
};

for(prop in lazySizesDefaults){
Expand Down Expand Up @@ -474,15 +444,15 @@
document.addEventListener(evt, lazyEvalLazy, true);
});

document.addEventListener('DOMContentLoaded', lazyEvalLazy, false);

if(/d$|^c/.test(readyState)){
onload();
} else {
document.addEventListener('DOMContentLoaded', lazyEvalLazy, false);
addEventListener('load', onload, false);
setTimeout(onload, 6000);
setTimeout(evalLazyElements);
}
lazyEvalLazy();
});

return {
Expand Down
Loading

0 comments on commit 2d66ccc

Please sign in to comment.