lazysizes - npm Package Compare versions

Comparing version 0.4.0 to 0.5.0

lazysizes.js

@@ -14,4 +14,5 @@ (function (factory) {
 	var lazyloadElems, autosizesElems, lazySizesConfig, globalSizesTimer,
-		globalSizesIndex, globalLazyTimer, globalLazyIndex, globalInitialTimer,
+		globalSizesIndex, globalLazyTimer, globalLazyIndex,
 		addClass, removeClass, hasClass, isWinloaded;
+
 	var document = window.document;
@@ -23,5 +24,2 @@ var isPreloading = 0;
 	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 || '');
 
@@ -31,9 +29,9 @@ var setImmediate = window.setImmediate || window.setTimeout;
 		var action = add ? 'addEventListener' : 'removeEventListener';
+		if(add){
+			addRemoveImgEvents(dom, fn);
+		}
 		dom[action]('load', fn, false);
 		dom[action]('error', fn, false);
 	};
-	var unveilAfterLoad = function(e){
-		addRemoveImgEvents(e.target, unveilAfterLoad);
-		unveilLazy(e.target, true);
-	};
+
 	var triggerEvent = function(elem, name, details){
@@ -121,3 +119,2 @@ var event = document.createEvent('Event');
 				clearTimeout(timer);
-				clearTimeout(globalInitialTimer);
 				running = true;
@@ -159,3 +156,4 @@ timer = setTimeout(run, 66);
 					(eLleft = rect.left) <= eLvW &&
-					(eLbottom || eLright || eLleft || eLtop)){
+					(eLbottom || eLright || eLleft || eLtop) &&
+					(!isWinloaded || getComputedStyle(lazyloadElems[globalLazyIndex], null).visibility != 'hidden')){
 					unveilLazy(lazyloadElems[globalLazyIndex]);
@@ -165,3 +163,2 @@ loadedSomething = true;
 					if(globalLazyIndex < eLlen - 1 && Date.now() - eLnow > 9){
-						globalLazyIndex++;
 						autoLoadElem = false;
@@ -185,2 +182,6 @@ globalLazyTimer = setTimeout(evalLazyElements, 4);
 	};
+	var switchLoadingClass = function(e){
+		addClass(e.target, e.target.getAttribute('data-loadedclass') || lazySizesConfig.loadedClass);
+		removeClass(e.target, lazySizesConfig.loadingClass);
+	};
 
@@ -190,3 +191,2 @@ function preload(elem){
 		elem = unveilLazy(elem);
-		addRemoveImgEvents(elem, resetPreloading);
 		addRemoveImgEvents(elem, resetPreloading, true);
@@ -203,3 +203,3 @@ clearTimeout(resetPreloadingTimer);
 	function unveilLazy(elem, force){
-		var sources, i, len, sourceSrcset, sizes, src, srcset, parent, isPicture;
+		var sources, i, len, sourceSrcset, sizes, src, srcset, parent, isImg, isPicture;
 
@@ -212,14 +212,2 @@ var event = triggerEvent(elem, 'lazybeforeunveil', {force: !!force});
 
-			if(regImg.test(elem.nodeName || '')) {
-				parent = elem.parentNode;
-				isPicture = regPicture.test(parent.nodeName || '');
-
-				//LQIP
-				if(!supportImageAbort && !isPicture && !force && !elem.complete && elem.getAttribute('src') && elem.src && !elem.lazyload){
-					addRemoveImgEvents(elem, unveilAfterLoad);
-					addRemoveImgEvents(elem, unveilAfterLoad, true);
-					return;
-				}
-			}
-
 			if(sizes){
@@ -239,21 +227,37 @@ if(sizes == 'auto'){
 
-			if(isPicture){
-				sources = parent.getElementsByTagName('source');
-				for(i = 0, len = sources.length; i < len; i++){
-					sourceSrcset = sources[i].getAttribute(lazySizesConfig.srcsetAttr);
-					if(sourceSrcset){
-						sources[i].setAttribute('srcset', sourceSrcset);
-					}
+			if((isImg = regImg.test(elem.nodeName || ''))) {
+				parent = elem.parentNode;
+				isPicture = regPicture.test(parent.nodeName || '');
+			}
+
+			if(lazySizesConfig.addClasses){
+				addClass(elem, lazySizesConfig.loadingClass);
+
+				if(isImg){
+					addRemoveImgEvents(elem, switchLoadingClass, true);
 				}
 			}
 
-			if(srcset){
-				elem.setAttribute('srcset', srcset);
-				if(lazySizesConfig.clearAttr){
-					elem.removeAttribute(lazySizesConfig.srcsetAttr);
+			if(srcset || src){
+
+				if(isPicture){
+					sources = parent.getElementsByTagName('source');
+					for(i = 0, len = sources.length; i < len; i++){
+						sourceSrcset = sources[i].getAttribute(lazySizesConfig.srcsetAttr);
+						if(sourceSrcset){
+							sources[i].setAttribute('srcset', sourceSrcset);
+						}
+					}
 				}
-			} else if(src){
-				elem.setAttribute('src', src);
-				if(lazySizesConfig.clearAttr) {
-					elem.removeAttribute(lazySizesConfig.srcAttr);
+
+				if(srcset){
+					elem.setAttribute('srcset', srcset);
+					if(lazySizesConfig.clearAttr){
+						elem.removeAttribute(lazySizesConfig.srcsetAttr);
+					}
+				} else if(src){
+					elem.setAttribute('src', src);
+					if(lazySizesConfig.clearAttr) {
+						elem.removeAttribute(lazySizesConfig.srcAttr);
+					}
 				}
@@ -272,2 +276,5 @@ }
 			}
+			if((!isImg || (!srcset && !src)) && lazySizesConfig.addClasses){
+				switchLoadingClass({target: elem});
+			}
 		});
@@ -365,5 +372,5 @@ return elem;
 	// The main check functions are written to run extreme fast without consuming memory.
+	var docElem = document.documentElement;
 	var onload = function(){
-		inViewTreshhold = 400;
-		clearTimeout(globalInitialTimer);
+		inViewTreshhold = 600;
 
@@ -374,3 +381,2 @@ document.addEventListener('load', lazyEvalLazy.throttled, true);
 	var onready = function(){
-		var docElem = document.documentElement;
 
@@ -418,3 +424,6 @@ if(lazySizesConfig.mutation){
 			cssanimation: true,
+			addClasses: false,
 			lazyClass: 'lazyload',
+			loadedClass: 'lazyloaded',
+			loadingClass: 'lazyloading',
 			scroll: true,
@@ -463,3 +472,3 @@ autosizesClass: 'lazyautosizes',
 		lazyEvalLazy.throttled();
-
+		removeClass(docElem, 'no-js');
 	});
@@ -466,0 +475,0 @@

lazysizes.min.js

@@ -1,3 +0,3 @@
-/*! lazysizes - v0.4.0 - 2014-11-05
+/*! lazysizes - v0.5.0 - 2014-11-26
  Licensed MIT */
-!function(a){window.lazySizes=a(),"function"==typeof define&&define.amd&&define(function(){return window.lazySizes})}(function(){"use strict";function a(a,b){var c;window.picturefill?picturefill({reevaluate:!0,reparse:!0,elements:[a]}):window.respimage&&!respimage._.observer?(b&&(c=a[respimage._.ns],c&&(c[b.srcset?"srcset":"src"]=void 0)),respimage({reparse:!0,elements:[a]})):!window.HTMLPictureElement&&window.console&&"complete"==s.readyState&&console.log("use a respimg polyfill: http://bit.ly/1FCts3P")}function b(a){t++,a=d(a),z(a,M),z(a,M,!0),clearTimeout(D),D=setTimeout(M,5e3)}function c(){m=0,clearTimeout(l)}function d(b,c){var d,e,g,h,j,k,l,m,n,q=B(b,"lazybeforeunveil",{force:!!c});if(!q.defaultPrevented){if(j=b.getAttribute(i.sizesAttr)||b.getAttribute("sizes"),v.test(b.nodeName||"")&&(m=b.parentNode,n=u.test(m.nodeName||""),!x&&!n&&!c&&!b.complete&&b.getAttribute("src")&&b.src&&!b.lazyload))return z(b,A),void z(b,A,!0);if(j&&("auto"==j?f(b,!0):b.setAttribute("sizes",j),i.clearAttr&&b.removeAttribute(i.sizesAttr)),l=b.getAttribute(i.srcsetAttr),k=b.getAttribute(i.srcAttr),n)for(d=m.getElementsByTagName("source"),e=0,g=d.length;g>e;e++)h=d[e].getAttribute(i.srcsetAttr),h&&d[e].setAttribute("srcset",h);l?(b.setAttribute("srcset",l),i.clearAttr&&b.removeAttribute(i.srcsetAttr)):k&&(b.setAttribute("src",k),i.clearAttr&&b.removeAttribute(i.srcAttr))}return y(function(){p(b,i.lazyClass),"auto"==j&&o(b,i.autosizesClass),(l||j)&&a(b,{srcset:l,src:k})}),b}function e(){k=0,clearTimeout(j)}function f(b,c){var d,e,f,g,h,j,k,l;if(g=b.parentNode){if(d=g.offsetWidth,e=b.offsetWidth,f=e>d?e:d,!f&&!b._lazysizesWidth)for(;g&&g!=s.body&&!f;)f=g.offsetWidth,g=g.parentNode;if(l=B(b,"lazybeforesizes",{width:f,dataAttr:!!c}),!l.defaultPrevented&&(f=l.details.width,f&&f!==b._lazysizesWidth&&(!i.onlyLargerSizes||!b._lazysizesWidth||b._lazysizesWidth<f))){if(b._lazysizesWidth=f,f+="px",b.setAttribute("sizes",f),u.test(g.nodeName||""))for(h=g.getElementsByTagName("source"),j=0,k=h.length;k>j;j++)h[j].setAttribute("sizes",f);l.details.dataAttr||a(b)}}}if(Date.now&&window.document.getElementsByClassName&&Object.freeze){var g,h,i,j,k,l,m,n,o,p,q,r,s=window.document,t=0,u=/^picture$/i,v=/^img$/i,w=10,x=/rident|hrome/.test(navigator.userAgent||""),y=window.setImmediate||window.setTimeout,z=function(a,b,c){var d=c?"addEventListener":"removeEventListener";a[d]("load",b,!1),a[d]("error",b,!1)},A=function(a){z(a.target,A),d(a.target,!0)},B=function(a,b,c){var d=s.createEvent("Event");return d.initEvent(b,!0,!0),d.details=c||{},a.dispatchEvent(d),d};s.documentElement.classList?(o=function(a,b){a.classList.add(b)},p=function(a,b){a.classList.remove(b)},q=function(a,b){return a.classList.contains(b)}):(o=function(a,b){q(a,b)||(a.className+=" "+b)},p=function(a,b){var c;q(a,b)&&(c=new RegExp("(\\s|^)"+b+"(\\s|$)"),a.className=a.className.replace(c," "))},q=function(a,b){return a.className.match(new RegExp("(\\s|^)"+b+"(\\s|$)"))});var C,D,E,F,G,H,I,J,K,L=Date.now(),M=function(a){t--,clearTimeout(D),a&&a.target&&z(a.target,M),(!a||0>t||!a.target)&&(t=0)},N=function(){var a,b,d=function(){b=!1},e=function(){clearTimeout(a),c(),O(),setTimeout(d)};return{debounce:function(){clearTimeout(a),clearTimeout(n),b=!0,a=setTimeout(e,66)},throttled:function(){var c;b||(b=!0,clearTimeout(a),c=Date.now()-L,c=c>300?9:99,a=setTimeout(e,c))}}}(),O=function(){var a,c,e;if(C=g.length,L=Date.now(),C){for(E=window.innerWidth+w,F=window.innerHeight+w,K=-1*w;C>m;m++)if(a=g[m].getBoundingClientRect(),(J=a.bottom)>=K&&(G=a.top)<=F&&(I=a.right)>=K&&(H=a.left)<=E&&(J||I||H||G))d(g[m]),e=!0;else{if(C-1>m&&Date.now()-L>9){m++,c=!1,l=setTimeout(O,4);break}!e&&r&&!c&&i.preloadAfterLoad&&2>t&&(J||I||H||G||"auto"!=g[m].getAttribute(i.sizesAttr))&&(c=g[m])}c&&!e&&b(c)}},P=function(){var a,b=function(){clearTimeout(a),e(),Q()};return function(){clearTimeout(a),clearTimeout(j),a=setTimeout(b,99)}}(),Q=function(){var a,b,c,d=h.length;if(d)for(b=Date.now(),c=k||0,a=c+3,e();d>c;c++)if(f(h[c]),c>a&&d-1>c&&Date.now()-b>9){k=c+1,j=setTimeout(Q,4);break}},R=function(){w=400,clearTimeout(n),s.addEventListener("load",N.throttled,!0),r=!0},S=function(){var a=s.documentElement;i.mutation&&(window.MutationObserver?new MutationObserver(N.throttled).observe(a,{childList:!0,subtree:!0,attributes:!0}):(a.addEventListener("DOMNodeInserted",N.throttled,!0),a.addEventListener("DOMAttrModified",N.throttled,!0))),i.hover&&s.addEventListener("mouseover",N.throttled,!0),s.addEventListener("focus",N.throttled,!0),window.addEventListener("hashchange",N.throttled,!0),"onmozfullscreenchange"in a?window.addEventListener("mozfullscreenchange",N.throttled,!0):"onwebkitfullscreenchange"in a?window.addEventListener("webkitfullscreenchange",N.throttled,!0):window.addEventListener("fullscreenchange",N.throttled,!0),i.cssanimation&&(s.addEventListener("animationstart",N.throttled,!0),s.addEventListener("transitionstart",N.throttled,!0))};return i=window.lazySizesConfig||{},function(){var a,b={mutation:!0,hover:!0,cssanimation:!0,lazyClass:"lazyload",scroll:!0,autosizesClass:"lazyautosizes",srcAttr:"data-src",srcsetAttr:"data-srcset",sizesAttr:"data-sizes",preloadAfterLoad:!1,onlyLargerSizes:!0};for(a in b)a in i||(i[a]=b[a])}(),setTimeout(function(){g=s.getElementsByClassName(i.lazyClass),h=s.getElementsByClassName(i.autosizesClass),i.scroll&&addEventListener("scroll",N.throttled,!0),addEventListener("resize",N.debounce,!1),addEventListener("resize",P,!1),/^i|^loade|c/.test(s.readyState)?S():s.addEventListener("DOMContentLoaded",S,!1),"complete"==s.readyState?R():(addEventListener("load",R,!1),s.addEventListener("readystatechange",N.throttled,!1)),N.throttled()}),{cfg:i,updateAllSizes:P,updateAllLazy:N.throttled,unveilLazy:function(a){q(a,i.lazyClass)&&d(a)},updateSizes:f,updatePolyfill:a}}});
+!function(a){window.lazySizes=a(),"function"==typeof define&&define.amd&&define(function(){return window.lazySizes})}(function(){"use strict";function a(a,b){var c;window.picturefill?picturefill({reevaluate:!0,reparse:!0,elements:[a]}):window.respimage&&!respimage._.observer?(b&&(c=a[respimage._.ns],c&&(c[b.srcset?"srcset":"src"]=void 0)),respimage({reparse:!0,elements:[a]})):!window.HTMLPictureElement&&window.console&&"complete"==r.readyState&&console.log("use a respimg polyfill: http://bit.ly/1FCts3P")}function b(a){s++,a=d(a),x(a,J,!0),clearTimeout(A),A=setTimeout(J,5e3)}function c(){m=0,clearTimeout(l)}function d(b,c){var d,e,g,h,j,k,l,m,p,q,r=y(b,"lazybeforeunveil",{force:!!c});if(!r.defaultPrevented&&(j=b.getAttribute(i.sizesAttr)||b.getAttribute("sizes"),j&&("auto"==j?f(b,!0):b.setAttribute("sizes",j),i.clearAttr&&b.removeAttribute(i.sizesAttr)),l=b.getAttribute(i.srcsetAttr),k=b.getAttribute(i.srcAttr),(p=u.test(b.nodeName||""))&&(m=b.parentNode,q=t.test(m.nodeName||"")),i.addClasses&&(n(b,i.loadingClass),p&&x(b,M,!0)),l||k)){if(q)for(d=m.getElementsByTagName("source"),e=0,g=d.length;g>e;e++)h=d[e].getAttribute(i.srcsetAttr),h&&d[e].setAttribute("srcset",h);l?(b.setAttribute("srcset",l),i.clearAttr&&b.removeAttribute(i.srcsetAttr)):k&&(b.setAttribute("src",k),i.clearAttr&&b.removeAttribute(i.srcAttr))}return w(function(){o(b,i.lazyClass),"auto"==j&&n(b,i.autosizesClass),(l||j)&&a(b,{srcset:l,src:k}),p&&(l||k)||!i.addClasses||M({target:b})}),b}function e(){k=0,clearTimeout(j)}function f(b,c){var d,e,f,g,h,j,k,l;if(g=b.parentNode){if(d=g.offsetWidth,e=b.offsetWidth,f=e>d?e:d,!f&&!b._lazysizesWidth)for(;g&&g!=r.body&&!f;)f=g.offsetWidth,g=g.parentNode;if(l=y(b,"lazybeforesizes",{width:f,dataAttr:!!c}),!l.defaultPrevented&&(f=l.details.width,f&&f!==b._lazysizesWidth&&(!i.onlyLargerSizes||!b._lazysizesWidth||b._lazysizesWidth<f))){if(b._lazysizesWidth=f,f+="px",b.setAttribute("sizes",f),t.test(g.nodeName||""))for(h=g.getElementsByTagName("source"),j=0,k=h.length;k>j;j++)h[j].setAttribute("sizes",f);l.details.dataAttr||a(b)}}}if(Date.now&&window.document.getElementsByClassName&&Object.freeze){var g,h,i,j,k,l,m,n,o,p,q,r=window.document,s=0,t=/^picture$/i,u=/^img$/i,v=10,w=window.setImmediate||window.setTimeout,x=function(a,b,c){var d=c?"addEventListener":"removeEventListener";c&&x(a,b),a[d]("load",b,!1),a[d]("error",b,!1)},y=function(a,b,c){var d=r.createEvent("Event");return d.initEvent(b,!0,!0),d.details=c||{},a.dispatchEvent(d),d};r.documentElement.classList?(n=function(a,b){a.classList.add(b)},o=function(a,b){a.classList.remove(b)},p=function(a,b){return a.classList.contains(b)}):(n=function(a,b){p(a,b)||(a.className+=" "+b)},o=function(a,b){var c;p(a,b)&&(c=new RegExp("(\\s|^)"+b+"(\\s|$)"),a.className=a.className.replace(c," "))},p=function(a,b){return a.className.match(new RegExp("(\\s|^)"+b+"(\\s|$)"))});var z,A,B,C,D,E,F,G,H,I=Date.now(),J=function(a){s--,clearTimeout(A),a&&a.target&&x(a.target,J),(!a||0>s||!a.target)&&(s=0)},K=function(){var a,b,d=function(){b=!1},e=function(){clearTimeout(a),c(),L(),setTimeout(d)};return{debounce:function(){clearTimeout(a),b=!0,a=setTimeout(e,66)},throttled:function(){var c;b||(b=!0,clearTimeout(a),c=Date.now()-I,c=c>300?9:99,a=setTimeout(e,c))}}}(),L=function(){var a,c,e;if(z=g.length,I=Date.now(),z){for(B=window.innerWidth+v,C=window.innerHeight+v,H=-1*v;z>m;m++)if(a=g[m].getBoundingClientRect(),(G=a.bottom)>=H&&(D=a.top)<=C&&(F=a.right)>=H&&(E=a.left)<=B&&(G||F||E||D)&&(!q||"hidden"!=getComputedStyle(g[m],null).visibility))d(g[m]),e=!0;else{if(z-1>m&&Date.now()-I>9){c=!1,l=setTimeout(L,4);break}!e&&q&&!c&&i.preloadAfterLoad&&2>s&&(G||F||E||D||"auto"!=g[m].getAttribute(i.sizesAttr))&&(c=g[m])}c&&!e&&b(c)}},M=function(a){n(a.target,a.target.getAttribute("data-loadedclass")||i.loadedClass),o(a.target,i.loadingClass)},N=function(){var a,b=function(){clearTimeout(a),e(),O()};return function(){clearTimeout(a),clearTimeout(j),a=setTimeout(b,99)}}(),O=function(){var a,b,c,d=h.length;if(d)for(b=Date.now(),c=k||0,a=c+3,e();d>c;c++)if(f(h[c]),c>a&&d-1>c&&Date.now()-b>9){k=c+1,j=setTimeout(O,4);break}},P=r.documentElement,Q=function(){v=600,r.addEventListener("load",K.throttled,!0),q=!0},R=function(){i.mutation&&(window.MutationObserver?new MutationObserver(K.throttled).observe(P,{childList:!0,subtree:!0,attributes:!0}):(P.addEventListener("DOMNodeInserted",K.throttled,!0),P.addEventListener("DOMAttrModified",K.throttled,!0))),i.hover&&r.addEventListener("mouseover",K.throttled,!0),r.addEventListener("focus",K.throttled,!0),window.addEventListener("hashchange",K.throttled,!0),"onmozfullscreenchange"in P?window.addEventListener("mozfullscreenchange",K.throttled,!0):"onwebkitfullscreenchange"in P?window.addEventListener("webkitfullscreenchange",K.throttled,!0):window.addEventListener("fullscreenchange",K.throttled,!0),i.cssanimation&&(r.addEventListener("animationstart",K.throttled,!0),r.addEventListener("transitionstart",K.throttled,!0))};return i=window.lazySizesConfig||{},function(){var a,b={mutation:!0,hover:!0,cssanimation:!0,addClasses:!1,lazyClass:"lazyload",loadedClass:"lazyloaded",loadingClass:"lazyloading",scroll:!0,autosizesClass:"lazyautosizes",srcAttr:"data-src",srcsetAttr:"data-srcset",sizesAttr:"data-sizes",preloadAfterLoad:!1,onlyLargerSizes:!0};for(a in b)a in i||(i[a]=b[a])}(),setTimeout(function(){g=r.getElementsByClassName(i.lazyClass),h=r.getElementsByClassName(i.autosizesClass),i.scroll&&addEventListener("scroll",K.throttled,!0),addEventListener("resize",K.debounce,!1),addEventListener("resize",N,!1),/^i|^loade|c/.test(r.readyState)?R():r.addEventListener("DOMContentLoaded",R,!1),"complete"==r.readyState?Q():(addEventListener("load",Q,!1),r.addEventListener("readystatechange",K.throttled,!1)),K.throttled(),o(P,"no-js")}),{cfg:i,updateAllSizes:N,updateAllLazy:K.throttled,unveilLazy:function(a){p(a,i.lazyClass)&&d(a)},updateSizes:f,updatePolyfill:a}}});

package.json

 {
-	"name": "lazysizes",
-	"version": "0.4.0",
-	"author": "Alexander Farkas <[e-mail]>",
-	"repository": {
-		"type": "git",
-		"url": "git://github.com/aFarkas/lazysizes.git"
-	},
-	"engines": {
-		"node": ">= 0.8.0"
-	},
-	"scripts": {
-		"test": "grunt test --verbose"
-	},
-	"devDependencies": {
-		"grunt": "~0.4.2",
-		"grunt-cli": "~0.1",
-		"grunt-contrib-jshint": "~0.10.0",
-		"grunt-contrib-uglify": "~0.2.0",
-		"grunt-contrib-watch": "~0.4.0",
-		"grunt-bytesize": "~0.1.1",
-		"grunt-uncss": "~0.3.7"
-	},
-	"autoupdate": {
-		"source": "git",
-		"target": "git://github.com/afarkas/lazysizes.git",
-		"basePath": "",
-		"files": [
-			"lazysizes.min.js"
-		]
-	},
-	"description": "High performance (jankfree) lazy loader for images (including responsive images), iframes and scripts (widgets).",
-	"keywords": ["lazy", "lazyloader", "performance", "responsive", "image", "responsive images", "picture", "srcset", "respimg", "respimage"]
+  "name": "lazysizes",
+  "version": "0.5.0",
+  "author": "Alexander Farkas <[e-mail]>",
+  "repository": {
+    "type": "git",
+    "url": "git://github.com/aFarkas/lazysizes.git"
+  },
+  "browser": "lazysizes.js",
+  "devDependencies": {
+    "grunt": "~0.4.2",
+    "grunt-bytesize": "~0.1.1",
+    "grunt-cli": "~0.1",
+    "grunt-contrib-jshint": "~0.10.0",
+    "grunt-contrib-uglify": "~0.2.0",
+    "grunt-contrib-watch": "~0.4.0",
+    "grunt-max-filesize": "^0.1.0",
+    "grunt-uncss": "~0.3.7"
+  },
+  "autoupdate": {
+    "source": "git",
+    "target": "git://github.com/afarkas/lazysizes.git",
+    "basePath": "",
+    "files": [
+      "lazysizes.min.js"
+    ]
+  },
+  "description": "High performance (jankfree) lazy loader for images (including responsive images), iframes and scripts (widgets).",
+  "keywords": [
+    "lazy",
+    "loader",
+    "lazyloader",
+    "performance",
+    "responsive",
+    "image",
+    "responsive images",
+    "picture",
+    "srcset",
+    "respimg",
+    "respimage"
+  ]
 }

plugins/README.md

@@ -5,2 +5,2 @@ #lazysizes plugins/extensions/snippets
 
-The scripts in this folder can be used as extensions or as boilerplate script to extend and adjust lazysizes to your needs. 
+The scripts in this folder can be used as extensions or as boilerplate snippets to extend and adjust lazysizes to your needs. 

plugins/unveilhooks/ls.unveilhooks.js

@@ -27,9 +27,25 @@ /*
 	'use strict';
-	var config;
+	var config, bgLoad;
 	var scriptUrls = {};
-	if(document.addEventListener){
+
+	if(document.addEventListener && window.getComputedStyle){
 		config = window.lazySizesConfig || (window.lazySizes && lazySizes.cfg) || {};
 
+		bgLoad = function (url, cb){
+			var img = document.createElement('img');
+			img.onload = function(){
+				img.onload = null;
+				img = null;
+				cb();
+			};
+
+			img.src = url;
+
+			if(img && img.complete && img.onload){
+				img.onload();
+			}
+		};
+
 		document.addEventListener('lazybeforeunveil', function(e){
-			var tmp;
+			var tmp, bg, load;
 			if(!e.defaultPrevented) {
@@ -45,3 +61,13 @@
 				if (tmp) {
-					e.target.style.backgroundImage = 'url(' + tmp + ')';
+					bg = getComputedStyle(e.target).getPropertyValue("backgroundImage");
+					load = function(){
+						e.target.style.backgroundImage = 'url(' + tmp + ')';
+					};
+
+					if(bg && bg != 'none'){
+						bgLoad(tmp, load);
+					} else {
+						load();
+					}
+
 					if(config.clearAttr){
@@ -57,3 +83,13 @@ e.target.removeAttribute('data-bg');
 				if(tmp){
-					e.target.poster = tmp;
+
+					load = function(){
+						e.target.poster = tmp;
+					};
+
+					if(e.target.getAttribute('poster')){
+						bgLoad(tmp, load);
+					} else {
+						load();
+					}
+
 					if(config.clearAttr){
@@ -60,0 +96,0 @@ e.target.removeAttribute('data-poster');

README.md

 #lazysizes
-**lazysizes** is a fast (jank-free) 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 environment simply simple.
+**lazysizes** is a fast (jank-free) 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 separate layout (CSS) from content/structure (HTML) and makes integrating responsive images into any environment simply simple.
 
@@ -42,5 +42,4 @@ ##How to
 2. **Future-proof**: It directly includes standard responsive image support (``picture`` and ``srcset``)
-3. **Seperation of concerns**: For responsive image support it adds an automatic ``sizes`` calculation feature.
+3. **Separation of concerns**: For responsive image support it adds an automatic ``sizes`` calculation feature.
 4. **Performance**: It's based on high efficient code (runtime **and** memory) to work jank-free at 60fps.
-5. Works together with [**low quality image placeholders**](http://www.guypo.com/feo/introducing-lqip-low-quality-image-placeholders/) patterns.
 
@@ -61,3 +60,3 @@ ##[Demo with code examples](http://afarkas.github.io/lazysizes/#examples)
 <img data-src="image.jpg" class="lazyload" />
-<!-- responsive image: -->
+<!-- retina optimized image: -->
 <img data-srcset="responsive-image1.jpg 1x, responsive-image2.jpg 2x" class="lazyload" />
@@ -78,5 +77,8 @@ ```
 
-##Recommended markup: LQIP
-We recommend to use the LQIP pattern (low quality image placeholder): Simply add a low quality image as the ``src``:
+##Recommended markup patterns
+For image bots (search engines and social networks), legacy browsers (IE8) or JS disabled browsers, it is important to serve a usable ``src`` attribute:
 
+###LQIP
+The LQIP pattern (low quality image placeholder): Simply add a low quality image as the ``src``:
+
 ```html
@@ -96,4 +98,30 @@ <!-- responsive example: -->
 
-The recommended 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 browsers/devices or searchengines (bots) as a good enough fallback (IE8 and Android 2 devices as also JS disabled).
+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 browsers/devices or searchengines (bots) as a good enough fallback (IE8 and Android 2 devices as also JS disabled). In case your lqip source is extreme fuzzy, you should consider serving either a higher quality, setting ``preloadAfterLoad`` to ``true`` or use the "noscript" pattern. The human eye/brain dislikes too heavy image quality jumps...
 
+###The noscript pattern
+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) or in case you can't even generate a LQIP src, but the image is important you can use the noscript pattern, which uses a 1x1 pixel grey image combined with a noscript tag:
+
+```html
+<style>
+	.lt-ie9 img.lazyload, /* just if you use extened IE8 noscript pattern */
+	.no-js img.lazyload {
+    	display: none;
+    }
+</style>
+
+<!-- noscript pattern without IE8 fallback -->
+<noscript>
+	<img src="image.jpg" />
+</noscript>
+<img src="grey.jpg" data-src="image.jpg" class="lazyload" />
+
+<!-- extended noscript pattern with IE8 fallback -->
+<!--[if ! lt IE 9]><!--><noscript><!--<![endif]-->
+	<img src="image.jpg" />
+<!--[if ! lt IE 9]><!--></noscript><!--<![endif]-->
+<!--[if gt IE 8]><!-->
+<img src="grey.jpg" data-src="image.jpg" class="lazyload" />
+<!--<![endif]-->
+```
+
 ###JS API 
@@ -115,3 +143,6 @@ **lazysizes** automatically detects new elements with the class ``lazyload`` so you won't need to call or configure anything in most situations.
 * ``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 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.preloadAfterLoad`` (default: ``false``): Wether lazysizes should load all elements after the window onload event. (Note: lazysizes will then load the elements using a queue. Only two parallel elements are loaded at the same time. This makes sure that other postboned downloads are not blocked.).
+* ``lazySizesConfig.addClasses`` (default: ``false``): Wether lazysizes should add loading and loaded classes. This can be used to add unveil effects or to apply new styles (background-image).
+* ``lazySizesConfig.loadingClass`` (default: ``"lazyloading"``): If ``addClasses`` is set to ``true`` 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"``): If ``addClasses`` is set to ``true`` 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.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.
@@ -126,3 +157,3 @@ * ``lazySizesConfig.clearAttr`` (default: ``false``): Set this to ``true`` if you want lazysizes to remove the ``data-`` attributes after doing it's work.
 
-* ``lazybeforeunveil``: This event will be fired on each lazyload element right before of the "unveil" transformation. Can be used to extend the unveil functionality. In case the event is ``defaultPrevented`` the default transformation action will be prevented (see also the [ls.unveilhooks.js plugin](plugins/unveilhooks/ls.unveilhooks.js)):
+* ``lazybeforeunveil``: This event will be fired on each lazyload element right before of the "unveil" transformation. This event can be used to extend the unveil functionality. In case the event is ``defaultPrevented`` the default transformation action will be prevented (see also the [ls.unveilhooks.js plugin](plugins/unveilhooks/ls.unveilhooks.js)):
 ```js
@@ -139,2 +170,54 @@ //add simple support for background images:
 ```
+
+The ``lazybeforeunveil`` event can also be used to add unveil effects using JS:
+
+```html 
+<style>
+img.lazyload {
+    opacity: 0;
+}
+</style>
+
+<script>
+$(document).on('lazybeforeunveil', (function(){
+	var onLoad = function(e){
+		$(e.target)
+			.animate({opacity: 1})
+			.off('load error', onLoad)
+		;
+
+	};
+	return function(e){
+		if(!e.isDefaultPrevented()){
+			$(e.target)
+				.filter('img')
+					.on('load error', onLoad)
+			;
+		}
+	};
+})());
+</script>
+```
+
+For CSS transition/animations use the ``addClasses`` option:
+
+```html 
+<style>
+.lazyload,
+.lazyloading {
+	opacity: 0;
+}
+.lazyloaded {
+	opacity: 1;
+	transition: opacity 300ms;
+}
+</style>
+
+<script>
+window.lazySizesConfig = {
+	addClasses: true
+};
+</script>
+```
+
 * ``lazybeforesizes``: This event will be fired on each element with the ``data-sizes="auto"`` attribute right before the calculated ``sizes`` attribute will be set. The ``event.details.width`` property is set to the calculated width of the element and can be changed to any number. In case the event is ``defaultPrevented`` the ``sizes`` attribute won't be set.
@@ -141,0 +224,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

41452

increased by8.65%

Lines of code

604

increased by5.78%

Number of lines in readme file

305

increased by37.39%

Worsened metrics

Dev dependency count

8

increased by14.29%

No dependency changes