lazysizes - npm Package Compare versions

Comparing version 0.5.1 to 0.5.2

lazysizes.js

@@ -10,5 +10,5 @@ (function (factory) {
 	'use strict';
+	/*jshint eqnull:true */
+	if(!Date.now || !window.document.getElementsByClassName){return;}
 
-	if(!Date.now || !window.document.getElementsByClassName || !Object.freeze){return;}
-
 	var lazyloadElems, autosizesElems, lazySizesConfig, globalSizesTimer,
@@ -19,2 +19,3 @@ globalSizesIndex, globalLazyTimer, globalLazyIndex,
 	var document = window.document;
+	var docElem = document.documentElement;
 	var isPreloading = 0;
@@ -34,2 +35,3 @@
 		dom[action]('error', fn, false);
+		dom[action]('lazyincluded', fn, false);
 	};
@@ -182,2 +184,3 @@
 		removeClass(e.target, lazySizesConfig.loadingClass);
+		addRemoveImgEvents(e.target, switchLoadingClass);
 	};
@@ -190,3 +193,3 @@
 		clearTimeout(resetPreloadingTimer);
-		resetPreloadingTimer = setTimeout(resetPreloading, 5000);
+		resetPreloadingTimer = setTimeout(resetPreloading, 999);
 	}
@@ -231,5 +234,3 @@
 
-				if(isImg){
-					addRemoveImgEvents(elem, switchLoadingClass, true);
-				}
+				addRemoveImgEvents(elem, switchLoadingClass, true);
 			}
@@ -277,3 +278,4 @@
 
-			if( lazySizesConfig.addClasses && (!isImg || (!srcset && !src) || (elem.complete && curSrc == (elem.currentSrc || elem.src))) ){
+			//remove curSrc == (elem.currentSrc || elem.src) it's a workaround for FF. see: https://bugzilla.mozilla.org/show_bug.cgi?id=608261
+			if( !event.details.stopSwitchClass && lazySizesConfig.addClasses && (!isImg || (!srcset && !src) || (elem.complete && curSrc == (elem.currentSrc || elem.src))) ){
 				switchLoadingClass({target: elem});
@@ -373,3 +375,3 @@ }
 	// The main check functions are written to run extreme fast without consuming memory.
-	var docElem = document.documentElement;
+
 	var onload = function(){
@@ -424,3 +426,2 @@ inViewTreshhold = 600;
 			cssanimation: true,
-			addClasses: false,
 			lazyClass: 'lazyload',
@@ -434,3 +435,4 @@ loadedClass: 'lazyloaded',
 			sizesAttr: 'data-sizes',
-			preloadAfterLoad: false,
+			//addClasses: false,
+			//preloadAfterLoad: false,
 			onlyLargerSizes: true
@@ -486,4 +488,8 @@ };
 		updateSizes: updateSizes,
-		updatePolyfill: updatePolyfill
+		updatePolyfill: updatePolyfill,
+		aC: addClass,
+		rC: removeClass,
+		hC: hasClass,
+		fire: triggerEvent
 	};
 }));

lazysizes.min.js

@@ -1,3 +0,3 @@
-/*! lazysizes - v0.5.1 - 2014-12-03
+/*! lazysizes - v0.5.2 - 2014-12-17
  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?(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 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}),s=b.currentSrc||b.src;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}),b.lazyload&&(b.lazyload=0),i.addClasses&&(!p||!l&&!k||b.complete&&s==(b.currentSrc||b.src))&&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=40,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}}});
+!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?(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 respimg polyfill: http://bit.ly/1FCts3P")}function b(a){t++,a=d(a),y(a,K,!0),clearTimeout(B),B=setTimeout(K,999)}function c(){m=0,clearTimeout(l)}function d(b,c){var d,e,g,h,j,k,l,m,p,q,r=z(b,"lazybeforeunveil",{force:!!c}),s=b.currentSrc||b.src;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=v.test(b.nodeName||""))&&(m=b.parentNode,q=u.test(m.nodeName||"")),i.addClasses&&(n(b,i.loadingClass),y(b,N,!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 x(function(){o(b,i.lazyClass),"auto"==j&&n(b,i.autosizesClass),(l||j)&&a(b,{srcset:l,src:k}),b.lazyload&&(b.lazyload=0),!r.details.stopSwitchClass&&i.addClasses&&(!p||!l&&!k||b.complete&&s==(b.currentSrc||b.src))&&N({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=z(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){var g,h,i,j,k,l,m,n,o,p,q,r=window.document,s=r.documentElement,t=0,u=/^picture$/i,v=/^img$/i,w=40,x=window.setImmediate||window.setTimeout,y=function(a,b,c){var d=c?"addEventListener":"removeEventListener";c&&y(a,b),a[d]("load",b,!1),a[d]("error",b,!1),a[d]("lazyincluded",b,!1)},z=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 A,B,C,D,E,F,G,H,I,J=Date.now(),K=function(a){t--,clearTimeout(B),a&&a.target&&y(a.target,K),(!a||0>t||!a.target)&&(t=0)},L=function(){var a,b,d=function(){b=!1},e=function(){clearTimeout(a),c(),M(),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()-J,c=c>300?9:99,a=setTimeout(e,c))}}}(),M=function(){var a,c,e;if(A=g.length,J=Date.now(),A){for(C=window.innerWidth+w,D=window.innerHeight+w,I=-1*w;A>m;m++)if(a=g[m].getBoundingClientRect(),(H=a.bottom)>=I&&(E=a.top)<=D&&(G=a.right)>=I&&(F=a.left)<=C&&(H||G||F||E)&&(!q||"hidden"!=getComputedStyle(g[m],null).visibility))d(g[m]),e=!0;else{if(A-1>m&&Date.now()-J>9){c=!1,l=setTimeout(M,4);break}!e&&q&&!c&&i.preloadAfterLoad&&2>t&&(H||G||F||E||"auto"!=g[m].getAttribute(i.sizesAttr))&&(c=g[m])}c&&!e&&b(c)}},N=function(a){n(a.target,a.target.getAttribute("data-loadedclass")||i.loadedClass),o(a.target,i.loadingClass),y(a.target,N)},O=function(){var a,b=function(){clearTimeout(a),e(),P()};return function(){clearTimeout(a),clearTimeout(j),a=setTimeout(b,99)}}(),P=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(P,4);break}},Q=function(){w=600,r.addEventListener("load",L.throttled,!0),q=!0},R=function(){i.mutation&&(window.MutationObserver?new MutationObserver(L.throttled).observe(s,{childList:!0,subtree:!0,attributes:!0}):(s.addEventListener("DOMNodeInserted",L.throttled,!0),s.addEventListener("DOMAttrModified",L.throttled,!0))),i.hover&&r.addEventListener("mouseover",L.throttled,!0),r.addEventListener("focus",L.throttled,!0),window.addEventListener("hashchange",L.throttled,!0),"onmozfullscreenchange"in s?window.addEventListener("mozfullscreenchange",L.throttled,!0):"onwebkitfullscreenchange"in s?window.addEventListener("webkitfullscreenchange",L.throttled,!0):window.addEventListener("fullscreenchange",L.throttled,!0),i.cssanimation&&(r.addEventListener("animationstart",L.throttled,!0),r.addEventListener("transitionstart",L.throttled,!0))};return i=window.lazySizesConfig||{},function(){var a,b={mutation:!0,hover:!0,cssanimation:!0,lazyClass:"lazyload",loadedClass:"lazyloaded",loadingClass:"lazyloading",scroll:!0,autosizesClass:"lazyautosizes",srcAttr:"data-src",srcsetAttr:"data-srcset",sizesAttr:"data-sizes",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",L.throttled,!0),addEventListener("resize",L.debounce,!1),addEventListener("resize",O,!1),/^i|^loade|c/.test(r.readyState)?R():r.addEventListener("DOMContentLoaded",R,!1),"complete"==r.readyState?Q():(addEventListener("load",Q,!1),r.addEventListener("readystatechange",L.throttled,!1)),L.throttled(),o(s,"no-js")}),{cfg:i,updateAllSizes:O,updateAllLazy:L.throttled,unveilLazy:function(a){p(a,i.lazyClass)&&d(a)},updateSizes:f,updatePolyfill:a,aC:n,rC:o,hC:p,fire:z}}});

package.json

 {
-  "name": "lazysizes",
-  "version": "0.5.1",
-  "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"
-  ]
+	"name": "lazysizes",
+	"version": "0.5.2",
+	"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"
+	},
+	"npmName": "lazysizes",
+	"npmFileMap": [
+		{
+			"basePath": "",
+			"files": [
+				"*.min.js",
+				"plugins/**/*.min.js"
+			]
+		}
+	],
+	"description": "High performance (jankfree) lazy loader for images (including responsive images), iframes and scripts (widgets).",
+	"keywords": [
+		"lazy",
+		"loader",
+		"lazyloader",
+		"lazyload",
+		"performance",
+		"responsive",
+		"image",
+		"responsive images",
+		"picture",
+		"srcset",
+		"respimg",
+	  	"respimage",
+	  	"include",
+	  	"include"
+	]
 }

plugins/print/ls.print.js

@@ -6,2 +6,3 @@ /*
 (function(window){
+	/*jshint eqnull:true */
 	'use strict';
@@ -8,0 +9,0 @@ var config, elements, onprint, printMedia;

plugins/scrollintent/ls.scrollintent.js

@@ -5,2 +5,3 @@ /*
 (function(window, document){
+	/*jshint eqnull:true */
 	'use strict';
@@ -7,0 +8,0 @@ var config, afterScrollTimer, update, checkElem, checkFn, checkTimer, top, left;

plugins/unveilhooks/ls.unveilhooks.js

@@ -26,5 +26,6 @@ /*
 (function(window, document){
+	/*jshint eqnull:true */
 	'use strict';
 	var config, bgLoad;
-	var scriptUrls = {};
+	var uniqueUrls = {};
 
@@ -58,2 +59,10 @@ if(document.addEventListener && window.getComputedStyle){
 
+				tmp = e.target.getAttribute('data-link');
+				if(tmp){
+					addStyleScript(tmp, true);
+					if(config.clearAttr){
+						e.target.removeAttribute('data-link');
+					}
+				}
+
 				// handle data-bg
@@ -76,4 +85,2 @@ tmp = e.target.getAttribute('data-bg');
 					}
-					e.preventDefault();
-					return;
 				}
@@ -98,4 +105,2 @@
 					}
-					e.preventDefault();
-					return;
 				}
@@ -106,8 +111,6 @@
 				if(tmp){
-					addScript(e.target, tmp);
+					addStyleScript(tmp);
 					if(config.clearAttr){
 						e.target.removeAttribute('data-script');
 					}
-					e.preventDefault();
-					return;
 				}
@@ -124,4 +127,2 @@
 					}
-					e.preventDefault();
-					return;
 				}
@@ -133,14 +134,19 @@ }
 
-	function addScript(element, src){
-		if(scriptUrls[src]){
+	function addStyleScript(src, style){
+		if(uniqueUrls[src]){
 			return;
 		}
-		var elem = document.createElement('script');
-		var parent = element.parentNode;
+		var elem = document.createElement(style ? 'link' : 'script');
+		var insertElem = document.getElementsByTagName('script')[0];
 
-		elem.src = src;
-		scriptUrls[src] = true;
-		scriptUrls[elem.src] = true;
-		parent.insertBefore(elem, element);
+		if(style){
+			elem.rel = 'stylesheet';
+			elem.href = src;
+		} else {
+			elem.src = src;
+		}
+		uniqueUrls[src] = true;
+		uniqueUrls[elem.src || elem.href] = true;
+		insertElem.parentNode.insertBefore(elem, insertElem);
 	}
 })(window, document);

plugins/unveilhooks/README.md

 #lazysizes unveilhooks extension
 
-The unveilhooks plugin extends lazysizes to also unveil / lazyload scripts/widgets, background images and video/audio elements:
+The unveilhooks plugin extends lazySizes to also unveil / lazyload scripts/widgets, background images, styles and video/audio elements:
 
@@ -16,2 +16,7 @@ ```html
 
+<!-- Styles -->
+<div class="lazyload" data-link="my-style.css">
+
+</div>
+
 <!-- Video example: -->
@@ -24,5 +29,30 @@ <video class="lazyload" data-poster="poster.jpg" preload="none">
 <div class="lazyload" data-require="module-name"></div>
+
+
+<!-- Styles & script combined -->
+<div class="lazyload" data-script="my-script.js" data-link="my-style.css">
+
+</div>
 ```
+
+Note: In case you want to lazyload a background image via a ``class`` you can do so by using the ``addClasses`` option:
+
+```html
+<script>
+window.lazySizesConfig = {
+	addClasses: true
+};
+</script>
+
+<style>
+	.bg-stage.lazyloaded {
+		background-image: url(lazyloaded-bg.jpg);
+	}
+</style>
+
+<div class="bg-stage lazyload">
+	<!-- content -->
+</div>
+```
  
- 
 

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 separate 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, scripts/widgets and much more. 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.
 
@@ -44,2 +44,3 @@ ##How to
 4. **Performance**: It's based on high efficient code (runtime **and** memory) to work jank-free at 60fps.
+5. **Extendable**: It provides JS and CSS hooks to extend lazySizes with any kind of lazy loading or effects.
 
@@ -50,3 +51,3 @@ ##[Demo with code examples](http://afarkas.github.io/lazysizes/#examples)
 ##About responsive image support
-For full cross browser responsive image support you must use a polyfill like [respimage (recommended)](https://github.com/aFarkas/respimage) or [picturefill](https://github.com/scottjehl/picturefill).
+For full cross browser responsive image support you must use a polyfill like [respimage (recommended) (srcset and picture polyfill)](https://github.com/aFarkas/respimage) or [picturefill](https://github.com/scottjehl/picturefill).
 
@@ -97,10 +98,9 @@ ##More about the API
 
-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" or the "SEO" pattern. The human eye/brain dislikes too heavy image quality jumps...
+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 setting ``preloadAfterLoad`` to ``true``.
 
 ###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:
+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:
 
 ```html
 <style>
-	.lt-ie9 img.lazyload, /* just if you use extened IE8 noscript pattern */
 	.no-js img.lazyload {
@@ -116,9 +116,2 @@ display: none;
 <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]-->
@@ -142,2 +135,4 @@ ```
 
+Note: While the noscript and the SEO pattern do save more bandwidth, they often still generate a slower perceived performance than the LQIP pattern due to the lack of the preload parser advantage.
+
 ###JS API
@@ -261,2 +256,20 @@ **lazysizes** automatically detects new elements with the class ``lazyload`` so you won't need to call or configure anything in most situations.
 
+##Available plugins in this repo
+
+###[RIAS plugin](plugins/rias)
+The [RIAS plugin](plugins/rias) plugin enables lazySizes to hook into any third party (ReSrc, Pixtulate, mobify, WURFL's Image Tailor ...) or self hosted restful responsive image service (responsive image on demand). It makes responsive images even more easier without any need for another third party script.
+
+###[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.
+
+###[unveilhooks plugin](plugins/unveilhooks)
+The [unveilhooks plugin](plugins/unveilhooks) plugin enables lazySizes to lazyload background images, widgets/components/scripts, styles and video/audio elements.
+
+###[include plugin](plugins/include)
+The [include plugin](plugins/include) plugin enables lazySizes to lazyload content either simply postboned or conditionaly based on certain conditions (for example media queries). This extension has an extreme great scalability.
+
+
+###[print plugin](plugins/unveilhooks)
+The [print plugin](plugins/unveilhooks) plugin enables lazySizes to unveil all elements as soon as the user starts to print. (Or set ``lazySizesConfig.preloadAfterLoad`` to ``true``).
+
 ##Why lazysizes
@@ -263,0 +276,0 @@ In the past I often struggled using lazy image loaders, because the "main check function" is called repeatedly and with a high frequency. Which makes it hard to fullfill two purposes runtime and memory efficiency. And looking into the source code of most so called lazy loaders often also unveils lazy developers...

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

Dynamic require

Supply chain risk

Dynamic require can indicate the package is performing dangerous or unsafe dynamic code execution.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

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

62536

increased by47.75%

Number of package files

20

increased by66.67%

Lines of code

872

increased by43.42%

Number of lines in readme file

333

increased by4.06%

Worsened metrics

Number of low quality alerts

3

increased by50%

Number of low supply chain risk alerts

2

increased by100%

No dependency changes