0.2.1

Author: aFarkas

README.md

@@ -101,7 +101,7 @@ window.lazySizesConfig = {
 Here the list of options:
 
 * ``lazySizesConfig.lazyClass`` (default: ``"lazyload"``): Marker class for all elements which should be lazy loaded (There can be only one ``class``. In case you need to add some other element, without the defined class, simply add it per JS: ``$('.lazy-others').addClass('lazyload');``)
-* ``lazySizesConfig.preloadAfterLoad`` (default: ``false``): Wether lazysizes should load all elements after the window onload event. (Note: lazysizes will then load all elements using a queue. Only two parallel elements are loaded at the same time. This makes sure that other postboned downloads are also loaded.). It's unsure wether this should be ``true`` by default. Recommendation: Set this to ``true`` at in case you don't use the LQIP pattern.
+* ``lazySizesConfig.preloadAfterLoad`` (default: ``false``): Wether lazysizes should load all elements after the window onload event. (Note: lazysizes will then load all elements using a queue. Only two parallel elements are loaded at the same time. This makes sure that other postboned downloads are also loaded.). It's unsure wether this should be ``true`` by default (depends...). Recommendation: Set this to ``true`` in case you don't use the LQIP pattern or you do not optimize for mobile.
 * ``lazySizesConfig.onlyLargerSizes`` (default: ``true``): In case a responsive image had the ``data-sizes="auto"`` attribute and the computed new size decreases, lazysizes won't normally change the ``sizes`` attribute to a lower value.
 * ``lazySizesConfig.srcAttr`` (default: ``"data-src"``): The attribute, which should be transformed to ``src``.
 * ``lazySizesConfig.srcset`` (default: ``"data-srcset"``): The attribute, which should be transformed to ``srcset``.
@@ -171,7 +171,7 @@ Due to the fact, that it is designed to be invoked with a high frequency and the
 <img src="lqip-src.jpg" data-src="image.jpg" class="lazyload" />
 ```
 
-##Specifying image dimensions
+##Specifying image dimensions (minimizing reflows)
 To minimize reflows and content jumping the width **and** the height of an image should be specified. For "static" images this can done using either CSS or using the content attributes:
 
 ```html
@@ -183,7 +183,7 @@ To minimize reflows and content jumping the width **and** the height of an image
     http://placehold.it/700x300 2x" class="lazyload" />
 ```
 
-For flexible responsive images the [intrinsic ratio scaling](http://www.smashingmagazine.com/2013/09/16/responsive-images-performance-problem-case-study/) can be used:
+For flexible responsive images [CSS intrinsic ratio scaling](http://alistapart.com/article/creating-intrinsic-ratios-for-video/) can be used:
 
 ```html
 <style>
@@ -196,7 +196,7 @@ For flexible responsive images the [intrinsic ratio scaling](http://www.smashing
 .ratio-container img,
 .ratio-container video,
 .ratio-container iframe {
-position: absolute;
+	position: absolute;
     top: 0;
     left: 0;
     width: 100%;

bower.json

@@ -1,7 +1,7 @@
 {
 	"name": "lazysizes",
 	"repo": "afarkas/lazysizes",
-	"version": "0.2.1-pre",
+	"version": "0.2.1",
 	"main": "lazysizes.min.js",
 	"scripts": [
 		"lazysizes.min.js"

component.json

@@ -1,6 +1,6 @@
 {
 	"name": "lazysizes",
-	"version": "0.2.1-pre",
+	"version": "0.2.1",
 	"repo": "afarkas/lazysizes",
 	"main": "lazysizes.min.js",
 	"scripts": ["lazysizes.min.js"],

index.html

@@ -351,7 +351,7 @@ <h3>Third slide label</h3>
 					<div class="caption">
 						<h3>Widgets/Javascript/Script</h3>
 						<p>Simply add a a <code>data-src</code> to your widget (has to be a <code>div</code>/<code>span</code> element) and you are done:</p>
-<pre>&lt;div data-ride="carousel" data-tag="script" data-src="assets/js/bootstrap.min.js" class="carousel lazyload"&gt;
+<pre>&lt;div data-ride="carousel" data-src="assets/js/bootstrap.min.js" class="carousel lazyload"&gt;
 	&lt;!-- widget content --&gt;
 &lt;div&gt;
 </pre>

lazysizes.js

@@ -27,8 +27,6 @@
 	var addRemoveImgEvents = function(dom, fn, add){
 		var action = add ? 'addEventListener' : 'removeEventListener';
 		dom[action]('load', fn, false);
-		dom[action]('abort', fn, false);
-		dom[action]('readystatechange', fn, false);
 		dom[action]('error', fn, false);
 	};
 	var unveilAfterLoad = function(e){
@@ -87,7 +85,7 @@
 			}
 			respimage({reparse: true, elements: [el]});
 		} else if(!window.HTMLPictureElement && window.console && document.readyState == 'complete'){
-			console.log('Please use a responsive image polyfill, like respimage or picturefill. https://github.com/aFarkas/respimage');
+			console.log('use a respimg polyfill: http://bit.ly/1FCts3P');
 		}
 	}
 
@@ -257,9 +255,6 @@
 						elem.setAttribute('sizes', sizes);
 					}
 					elem.removeAttribute(lazySizesConfig.sizesAttr);
-					if (!srcset && window.console && elem.getAttribute('srcset')){
-						console.log('using lazysizes with a `srcset` attribute is not good. Use `data-srcset` instead');
-					}
 				}
 
 				if(srcset){
@@ -329,7 +324,7 @@
 	}
 
 	function updateSizes(elem, noPolyfill){
-		var parentWidth, elemWidth, width, cbWidth, parent, sources, i, len, event;
+		var parentWidth, elemWidth, width, parent, sources, i, len, event;
 		parent = elem.parentNode;
 
 		if(parent){

lazysizes.min.js

@@ -1,6 +1,6 @@
 {
 	"name": "lazysizes",
-	"version": "0.2.1-pre",
+	"version": "0.2.1",
 	"engines": {
 		"node": ">= 0.8.0"
 	},