0.3.0

Author: aFarkas

README.md

@@ -1,5 +1,5 @@
 #lazysizes
-**lazysizes** is a fast (jankfree) lazyloader for images (including responsive images), iframes and scripts/widgets without any dependency. It may become also your number one tool to integrate responsive images. Due to the fact that it can also automatically calculate the ``sizes`` attribute for your responsive images, it helps to seperate layout (CSS) from content/structure (HTML) and makes integrating responsive images into any enviroment simply simple.
+**lazysizes** is a fast (jankfree) lazyloader for images (including responsive images), iframes and scripts/widgets. It may become also your number one tool to integrate responsive images. Due to the fact that it can also automatically calculate the ``sizes`` attribute for your responsive images, it helps to seperate layout (CSS) from content/structure (HTML) and makes integrating responsive images into any enviroment simply simple.
 
 ##How to
 
@@ -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 (depends...). Recommendation: Set this to ``true`` in case you don't use the LQIP pattern or you do not optimize for mobile.
+* ``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 not blocked.). 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``.

bower.json

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

component.json

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

lazysizes.js

@@ -21,6 +21,9 @@
 	var regScript = /^script$/i;
 	var regImg = /^img$/i;
 	var inViewTreshhold = 10;
+	// currently only chrome and IE do support aborting image downloads by changing the src
+	// sadly we can't feature detect it
+	var supportImageAbort = (/rident|hrome/).test(navigator.userAgent || '');
 
 	var setImmediate = window.setImmediate || window.setTimeout;
 	var scriptUrls = {};
@@ -232,7 +235,7 @@
 					isPicture = regPicture.test(parent.nodeName || '');
 
 					//LQIP
-					if(!isPicture && !force && !elem.complete && elem.getAttribute('src') && elem.src && !elem.lazyload){
+					if(!supportImageAbort && !isPicture && !force && !elem.complete && elem.getAttribute('src') && elem.src && !elem.lazyload){
 						addRemoveImgEvents(elem, unveilAfterLoad);
 						addRemoveImgEvents(elem, unveilAfterLoad, true);
 						return;

lazysizes.min.js

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