lazysizes
Advanced tools
Comparing version 3.0.0 to 4.0.0-rc1
@@ -1,5 +0,12 @@ | ||
#Changelog | ||
# Changelog | ||
##2.0.0 | ||
### 4.0.0-RC1 | ||
* make all plugins CommonJS compatible (thx to @claudiobmgrtnr and @jantimon) | ||
* added `loadHidden` option(thx to @justinvoelker) | ||
* added artdirection plugin (no documentation yet, but great) | ||
* iOS 8.1 fixes has to loaded explicitly (not included in respimg plugin anymore) | ||
* removed `picture` support for old FF 38- | ||
## 2.0.0 | ||
* lazysizes core: | ||
@@ -11,3 +18,3 @@ * heavily improved performance (`requestIdleCallback`, better debouncing and a lot more). | ||
##1.5.0 | ||
## 1.5.0 | ||
Breaking change: | ||
@@ -25,3 +32,3 @@ * the lazysizes.js and lazysizes.min.js files do not register as AMD modules anymore, if you need an AMD module use the new lazysizes-umd.js or lazysizes-umd.min.js file. | ||
##1.4.0 | ||
## 1.4.0 | ||
* lazysizes core: | ||
@@ -36,3 +43,3 @@ * improved lazyloading in background tabs. | ||
##1.3.2 | ||
## 1.3.2 | ||
@@ -46,3 +53,3 @@ * lazysizes core: | ||
##1.3.1 version | ||
## 1.3.1 version | ||
@@ -49,0 +56,0 @@ * lazysizes core: |
(function(window, factory) { | ||
var lazySizes = factory(window, window.document); | ||
window.lazySizes = lazySizes; | ||
if(typeof module == 'object' && module.exports){ | ||
@@ -8,2 +7,4 @@ module.exports = lazySizes; | ||
define(lazySizes); | ||
} else { | ||
window.lazySizes = lazySizes; | ||
} | ||
@@ -15,3 +16,3 @@ }(window, function l(window, document) { | ||
var lazySizesConfig; | ||
var lazysizes, lazySizesConfig; | ||
@@ -77,4 +78,10 @@ var docElem = document.documentElement; | ||
event.initCustomEvent(name, !noBubbles, !noCancelable, detail || {}); | ||
if(!detail){ | ||
detail = {}; | ||
} | ||
detail.instance = lazysizes; | ||
event.initCustomEvent(name, !noBubbles, !noCancelable, detail); | ||
elem.dispatchEvent(event); | ||
@@ -345,2 +352,3 @@ return event; | ||
(eLbottom || eLright || eLleft || eLtop) && | ||
(lazySizesConfig.loadHidden || getCSS(lazyloadElems[i], 'visibility') != 'hidden') && | ||
((isCompleted && isLoading < 3 && !elemExpandVal && (loadMode < 3 || lowRuns < 4)) || isNestedVisible(lazyloadElems[i], elemExpand))){ | ||
@@ -385,3 +393,3 @@ unveilElement(lazyloadElems[i]); | ||
var handleSources = function(source){ | ||
var customMedia, parent; | ||
var customMedia; | ||
@@ -397,9 +405,2 @@ var sourceSrcset = source[_getAttribute](lazySizesConfig.srcsetAttr); | ||
} | ||
//https://bugzilla.mozilla.org/show_bug.cgi?id=1170572 | ||
if(customMedia){ | ||
parent = source.parentNode; | ||
parent.insertBefore(source.cloneNode(), source); | ||
parent.removeChild(source); | ||
} | ||
}; | ||
@@ -455,3 +456,3 @@ | ||
if(srcset || isPicture){ | ||
if(isImg && (srcset || isPicture)){ | ||
updatePolyfill(elem, {src: src}); | ||
@@ -665,3 +666,4 @@ } | ||
hFac: 0.8, | ||
loadMode: 2 | ||
loadMode: 2, | ||
loadHidden: true, | ||
}; | ||
@@ -686,3 +688,3 @@ | ||
return { | ||
lazysizes = { | ||
cfg: lazySizesConfig, | ||
@@ -700,3 +702,5 @@ autoSizer: autoSizer, | ||
}; | ||
return lazysizes; | ||
} | ||
)); |
@@ -1,2 +0,2 @@ | ||
/*! lazysizes - v3.0.0 */ | ||
!function(a,b){var c=b(a,a.document);a.lazySizes=c,"object"==typeof module&&module.exports?module.exports=c:"function"==typeof define&&define.amd&&define(c)}(window,function(a,b){"use strict";if(b.getElementsByClassName){var c,d=b.documentElement,e=a.Date,f=a.HTMLPictureElement,g="addEventListener",h="getAttribute",i=a[g],j=a.setTimeout,k=a.requestAnimationFrame||j,l=a.requestIdleCallback,m=/^picture$/i,n=["load","error","lazyincluded","_lazyloaded"],o={},p=Array.prototype.forEach,q=function(a,b){return o[b]||(o[b]=new RegExp("(\\s|^)"+b+"(\\s|$)")),o[b].test(a[h]("class")||"")&&o[b]},r=function(a,b){q(a,b)||a.setAttribute("class",(a[h]("class")||"").trim()+" "+b)},s=function(a,b){var c;(c=q(a,b))&&a.setAttribute("class",(a[h]("class")||"").replace(c," "))},t=function(a,b,c){var d=c?g:"removeEventListener";c&&t(a,b),n.forEach(function(c){a[d](c,b)})},u=function(a,c,d,e,f){var g=b.createEvent("CustomEvent");return g.initCustomEvent(c,!e,!f,d||{}),a.dispatchEvent(g),g},v=function(b,d){var e;!f&&(e=a.picturefill||c.pf)?e({reevaluate:!0,elements:[b]}):d&&d.src&&(b.src=d.src)},w=function(a,b){return(getComputedStyle(a,null)||{})[b]},x=function(a,b,d){for(d=d||a.offsetWidth;d<c.minSize&&b&&!a._lazysizesWidth;)d=b.offsetWidth,b=b.parentNode;return d},y=function(){var a,c,d=[],e=[],f=d,g=function(){var b=f;for(f=d.length?e:d,a=!0,c=!1;b.length;)b.shift()();a=!1},h=function(d,e){a&&!e?d.apply(this,arguments):(f.push(d),c||(c=!0,(b.hidden?j:k)(g)))};return h._lsFlush=g,h}(),z=function(a,b){return b?function(){y(a)}:function(){var b=this,c=arguments;y(function(){a.apply(b,c)})}},A=function(a){var b,c=0,d=125,f=666,g=f,h=function(){b=!1,c=e.now(),a()},i=l?function(){l(h,{timeout:g}),g!==f&&(g=f)}:z(function(){j(h)},!0);return function(a){var f;(a=a===!0)&&(g=44),b||(b=!0,f=d-(e.now()-c),0>f&&(f=0),a||9>f&&l?i():j(i,f))}},B=function(a){var b,c,d=99,f=function(){b=null,a()},g=function(){var a=e.now()-c;d>a?j(g,d-a):(l||f)(f)};return function(){c=e.now(),b||(b=j(g,d))}},C=function(){var f,k,l,n,o,x,C,E,F,G,H,I,J,K,L,M=/^img$/i,N=/^iframe$/i,O="onscroll"in a&&!/glebot/.test(navigator.userAgent),P=0,Q=0,R=0,S=-1,T=function(a){R--,a&&a.target&&t(a.target,T),(!a||0>R||!a.target)&&(R=0)},U=function(a,c){var e,f=a,g="hidden"==w(b.body,"visibility")||"hidden"!=w(a,"visibility");for(F-=c,I+=c,G-=c,H+=c;g&&(f=f.offsetParent)&&f!=b.body&&f!=d;)g=(w(f,"opacity")||1)>0,g&&"visible"!=w(f,"overflow")&&(e=f.getBoundingClientRect(),g=H>e.left&&G<e.right&&I>e.top-1&&F<e.bottom+1);return g},V=function(){var a,e,g,i,j,m,n,p,q;if((o=c.loadMode)&&8>R&&(a=f.length)){e=0,S++,null==K&&("expand"in c||(c.expand=d.clientHeight>500&&d.clientWidth>500?500:370),J=c.expand,K=J*c.expFactor),K>Q&&1>R&&S>2&&o>2&&!b.hidden?(Q=K,S=0):Q=o>1&&S>1&&6>R?J:P;for(;a>e;e++)if(f[e]&&!f[e]._lazyRace)if(O)if((p=f[e][h]("data-expand"))&&(m=1*p)||(m=Q),q!==m&&(C=innerWidth+m*L,E=innerHeight+m,n=-1*m,q=m),g=f[e].getBoundingClientRect(),(I=g.bottom)>=n&&(F=g.top)<=E&&(H=g.right)>=n*L&&(G=g.left)<=C&&(I||H||G||F)&&(l&&3>R&&!p&&(3>o||4>S)||U(f[e],m))){if(ba(f[e]),j=!0,R>9)break}else!j&&l&&!i&&4>R&&4>S&&o>2&&(k[0]||c.preloadAfterLoad)&&(k[0]||!p&&(I||H||G||F||"auto"!=f[e][h](c.sizesAttr)))&&(i=k[0]||f[e]);else ba(f[e]);i&&!j&&ba(i)}},W=A(V),X=function(a){r(a.target,c.loadedClass),s(a.target,c.loadingClass),t(a.target,Z)},Y=z(X),Z=function(a){Y({target:a.target})},$=function(a,b){try{a.contentWindow.location.replace(b)}catch(c){a.src=b}},_=function(a){var b,d,e=a[h](c.srcsetAttr);(b=c.customMedia[a[h]("data-media")||a[h]("media")])&&a.setAttribute("media",b),e&&a.setAttribute("srcset",e),b&&(d=a.parentNode,d.insertBefore(a.cloneNode(),a),d.removeChild(a))},aa=z(function(a,b,d,e,f){var g,i,k,l,o,q;(o=u(a,"lazybeforeunveil",b)).defaultPrevented||(e&&(d?r(a,c.autosizesClass):a.setAttribute("sizes",e)),i=a[h](c.srcsetAttr),g=a[h](c.srcAttr),f&&(k=a.parentNode,l=k&&m.test(k.nodeName||"")),q=b.firesLoad||"src"in a&&(i||g||l),o={target:a},q&&(t(a,T,!0),clearTimeout(n),n=j(T,2500),r(a,c.loadingClass),t(a,Z,!0)),l&&p.call(k.getElementsByTagName("source"),_),i?a.setAttribute("srcset",i):g&&!l&&(N.test(a.nodeName)?$(a,g):a.src=g),(i||l)&&v(a,{src:g})),a._lazyRace&&delete a._lazyRace,s(a,c.lazyClass),y(function(){(!q||a.complete&&a.naturalWidth>1)&&(q?T(o):R--,X(o))},!0)}),ba=function(a){var b,d=M.test(a.nodeName),e=d&&(a[h](c.sizesAttr)||a[h]("sizes")),f="auto"==e;(!f&&l||!d||!a.src&&!a.srcset||a.complete||q(a,c.errorClass))&&(b=u(a,"lazyunveilread").detail,f&&D.updateElem(a,!0,a.offsetWidth),a._lazyRace=!0,R++,aa(a,b,f,e,d))},ca=function(){if(!l){if(e.now()-x<999)return void j(ca,999);var a=B(function(){c.loadMode=3,W()});l=!0,c.loadMode=3,W(),i("scroll",function(){3==c.loadMode&&(c.loadMode=2),a()},!0)}};return{_:function(){x=e.now(),f=b.getElementsByClassName(c.lazyClass),k=b.getElementsByClassName(c.lazyClass+" "+c.preloadClass),L=c.hFac,i("scroll",W,!0),i("resize",W,!0),a.MutationObserver?new MutationObserver(W).observe(d,{childList:!0,subtree:!0,attributes:!0}):(d[g]("DOMNodeInserted",W,!0),d[g]("DOMAttrModified",W,!0),setInterval(W,999)),i("hashchange",W,!0),["focus","mouseover","click","load","transitionend","animationend","webkitAnimationEnd"].forEach(function(a){b[g](a,W,!0)}),/d$|^c/.test(b.readyState)?ca():(i("load",ca),b[g]("DOMContentLoaded",W),j(ca,2e4)),f.length?(V(),y._lsFlush()):W()},checkElems:W,unveil:ba}}(),D=function(){var a,d=z(function(a,b,c,d){var e,f,g;if(a._lazysizesWidth=d,d+="px",a.setAttribute("sizes",d),m.test(b.nodeName||""))for(e=b.getElementsByTagName("source"),f=0,g=e.length;g>f;f++)e[f].setAttribute("sizes",d);c.detail.dataAttr||v(a,c.detail)}),e=function(a,b,c){var e,f=a.parentNode;f&&(c=x(a,f,c),e=u(a,"lazybeforesizes",{width:c,dataAttr:!!b}),e.defaultPrevented||(c=e.detail.width,c&&c!==a._lazysizesWidth&&d(a,f,e,c)))},f=function(){var b,c=a.length;if(c)for(b=0;c>b;b++)e(a[b])},g=B(f);return{_:function(){a=b.getElementsByClassName(c.autosizesClass),i("resize",g)},checkElems:g,updateElem:e}}(),E=function(){E.i||(E.i=!0,D._(),C._())};return function(){var b,d={lazyClass:"lazyload",loadedClass:"lazyloaded",loadingClass:"lazyloading",preloadClass:"lazypreload",errorClass:"lazyerror",autosizesClass:"lazyautosizes",srcAttr:"data-src",srcsetAttr:"data-srcset",sizesAttr:"data-sizes",minSize:40,customMedia:{},init:!0,expFactor:1.5,hFac:.8,loadMode:2};c=a.lazySizesConfig||a.lazysizesConfig||{};for(b in d)b in c||(c[b]=d[b]);a.lazySizesConfig=c,j(function(){c.init&&E()})}(),{cfg:c,autoSizer:D,loader:C,init:E,uP:v,aC:r,rC:s,hC:q,fire:u,gW:x,rAF:y}}}); | ||
/*! lazysizes - v4.0.0-rc1 */ | ||
!function(a,b){var c=b(a,a.document);"object"==typeof module&&module.exports?module.exports=c:"function"==typeof define&&define.amd?define(c):a.lazySizes=c}(window,function(a,b){"use strict";if(b.getElementsByClassName){var c,d,e=b.documentElement,f=a.Date,g=a.HTMLPictureElement,h="addEventListener",i="getAttribute",j=a[h],k=a.setTimeout,l=a.requestAnimationFrame||k,m=a.requestIdleCallback,n=/^picture$/i,o=["load","error","lazyincluded","_lazyloaded"],p={},q=Array.prototype.forEach,r=function(a,b){return p[b]||(p[b]=new RegExp("(\\s|^)"+b+"(\\s|$)")),p[b].test(a[i]("class")||"")&&p[b]},s=function(a,b){r(a,b)||a.setAttribute("class",(a[i]("class")||"").trim()+" "+b)},t=function(a,b){var c;(c=r(a,b))&&a.setAttribute("class",(a[i]("class")||"").replace(c," "))},u=function(a,b,c){var d=c?h:"removeEventListener";c&&u(a,b),o.forEach(function(c){a[d](c,b)})},v=function(a,d,e,f,g){var h=b.createEvent("CustomEvent");return e||(e={}),e.instance=c,h.initCustomEvent(d,!f,!g,e),a.dispatchEvent(h),h},w=function(b,c){var e;!g&&(e=a.picturefill||d.pf)?e({reevaluate:!0,elements:[b]}):c&&c.src&&(b.src=c.src)},x=function(a,b){return(getComputedStyle(a,null)||{})[b]},y=function(a,b,c){for(c=c||a.offsetWidth;c<d.minSize&&b&&!a._lazysizesWidth;)c=b.offsetWidth,b=b.parentNode;return c},z=function(){var a,c,d=[],e=[],f=d,g=function(){var b=f;for(f=d.length?e:d,a=!0,c=!1;b.length;)b.shift()();a=!1},h=function(d,e){a&&!e?d.apply(this,arguments):(f.push(d),c||(c=!0,(b.hidden?k:l)(g)))};return h._lsFlush=g,h}(),A=function(a,b){return b?function(){z(a)}:function(){var b=this,c=arguments;z(function(){a.apply(b,c)})}},B=function(a){var b,c=0,d=125,e=666,g=e,h=function(){b=!1,c=f.now(),a()},i=m?function(){m(h,{timeout:g}),g!==e&&(g=e)}:A(function(){k(h)},!0);return function(a){var e;(a=a===!0)&&(g=44),b||(b=!0,e=d-(f.now()-c),0>e&&(e=0),a||9>e&&m?i():k(i,e))}},C=function(a){var b,c,d=99,e=function(){b=null,a()},g=function(){var a=f.now()-c;d>a?k(g,d-a):(m||e)(e)};return function(){c=f.now(),b||(b=k(g,d))}},D=function(){var c,g,l,m,o,p,y,D,F,G,H,I,J,K,L,M=/^img$/i,N=/^iframe$/i,O="onscroll"in a&&!/glebot/.test(navigator.userAgent),P=0,Q=0,R=0,S=-1,T=function(a){R--,a&&a.target&&u(a.target,T),(!a||0>R||!a.target)&&(R=0)},U=function(a,c){var d,f=a,g="hidden"==x(b.body,"visibility")||"hidden"!=x(a,"visibility");for(F-=c,I+=c,G-=c,H+=c;g&&(f=f.offsetParent)&&f!=b.body&&f!=e;)g=(x(f,"opacity")||1)>0,g&&"visible"!=x(f,"overflow")&&(d=f.getBoundingClientRect(),g=H>d.left&&G<d.right&&I>d.top-1&&F<d.bottom+1);return g},V=function(){var a,f,h,j,k,m,n,p,q;if((o=d.loadMode)&&8>R&&(a=c.length)){f=0,S++,null==K&&("expand"in d||(d.expand=e.clientHeight>500&&e.clientWidth>500?500:370),J=d.expand,K=J*d.expFactor),K>Q&&1>R&&S>2&&o>2&&!b.hidden?(Q=K,S=0):Q=o>1&&S>1&&6>R?J:P;for(;a>f;f++)if(c[f]&&!c[f]._lazyRace)if(O)if((p=c[f][i]("data-expand"))&&(m=1*p)||(m=Q),q!==m&&(y=innerWidth+m*L,D=innerHeight+m,n=-1*m,q=m),h=c[f].getBoundingClientRect(),(I=h.bottom)>=n&&(F=h.top)<=D&&(H=h.right)>=n*L&&(G=h.left)<=y&&(I||H||G||F)&&(d.loadHidden||"hidden"!=x(c[f],"visibility"))&&(l&&3>R&&!p&&(3>o||4>S)||U(c[f],m))){if(ba(c[f]),k=!0,R>9)break}else!k&&l&&!j&&4>R&&4>S&&o>2&&(g[0]||d.preloadAfterLoad)&&(g[0]||!p&&(I||H||G||F||"auto"!=c[f][i](d.sizesAttr)))&&(j=g[0]||c[f]);else ba(c[f]);j&&!k&&ba(j)}},W=B(V),X=function(a){s(a.target,d.loadedClass),t(a.target,d.loadingClass),u(a.target,Z)},Y=A(X),Z=function(a){Y({target:a.target})},$=function(a,b){try{a.contentWindow.location.replace(b)}catch(c){a.src=b}},_=function(a){var b,c=a[i](d.srcsetAttr);(b=d.customMedia[a[i]("data-media")||a[i]("media")])&&a.setAttribute("media",b),c&&a.setAttribute("srcset",c)},aa=A(function(a,b,c,e,f){var g,h,j,l,o,p;(o=v(a,"lazybeforeunveil",b)).defaultPrevented||(e&&(c?s(a,d.autosizesClass):a.setAttribute("sizes",e)),h=a[i](d.srcsetAttr),g=a[i](d.srcAttr),f&&(j=a.parentNode,l=j&&n.test(j.nodeName||"")),p=b.firesLoad||"src"in a&&(h||g||l),o={target:a},p&&(u(a,T,!0),clearTimeout(m),m=k(T,2500),s(a,d.loadingClass),u(a,Z,!0)),l&&q.call(j.getElementsByTagName("source"),_),h?a.setAttribute("srcset",h):g&&!l&&(N.test(a.nodeName)?$(a,g):a.src=g),f&&(h||l)&&w(a,{src:g})),a._lazyRace&&delete a._lazyRace,t(a,d.lazyClass),z(function(){(!p||a.complete&&a.naturalWidth>1)&&(p?T(o):R--,X(o))},!0)}),ba=function(a){var b,c=M.test(a.nodeName),e=c&&(a[i](d.sizesAttr)||a[i]("sizes")),f="auto"==e;(!f&&l||!c||!a.src&&!a.srcset||a.complete||r(a,d.errorClass))&&(b=v(a,"lazyunveilread").detail,f&&E.updateElem(a,!0,a.offsetWidth),a._lazyRace=!0,R++,aa(a,b,f,e,c))},ca=function(){if(!l){if(f.now()-p<999)return void k(ca,999);var a=C(function(){d.loadMode=3,W()});l=!0,d.loadMode=3,W(),j("scroll",function(){3==d.loadMode&&(d.loadMode=2),a()},!0)}};return{_:function(){p=f.now(),c=b.getElementsByClassName(d.lazyClass),g=b.getElementsByClassName(d.lazyClass+" "+d.preloadClass),L=d.hFac,j("scroll",W,!0),j("resize",W,!0),a.MutationObserver?new MutationObserver(W).observe(e,{childList:!0,subtree:!0,attributes:!0}):(e[h]("DOMNodeInserted",W,!0),e[h]("DOMAttrModified",W,!0),setInterval(W,999)),j("hashchange",W,!0),["focus","mouseover","click","load","transitionend","animationend","webkitAnimationEnd"].forEach(function(a){b[h](a,W,!0)}),/d$|^c/.test(b.readyState)?ca():(j("load",ca),b[h]("DOMContentLoaded",W),k(ca,2e4)),c.length?(V(),z._lsFlush()):W()},checkElems:W,unveil:ba}}(),E=function(){var a,c=A(function(a,b,c,d){var e,f,g;if(a._lazysizesWidth=d,d+="px",a.setAttribute("sizes",d),n.test(b.nodeName||""))for(e=b.getElementsByTagName("source"),f=0,g=e.length;g>f;f++)e[f].setAttribute("sizes",d);c.detail.dataAttr||w(a,c.detail)}),e=function(a,b,d){var e,f=a.parentNode;f&&(d=y(a,f,d),e=v(a,"lazybeforesizes",{width:d,dataAttr:!!b}),e.defaultPrevented||(d=e.detail.width,d&&d!==a._lazysizesWidth&&c(a,f,e,d)))},f=function(){var b,c=a.length;if(c)for(b=0;c>b;b++)e(a[b])},g=C(f);return{_:function(){a=b.getElementsByClassName(d.autosizesClass),j("resize",g)},checkElems:g,updateElem:e}}(),F=function(){F.i||(F.i=!0,E._(),D._())};return function(){var b,c={lazyClass:"lazyload",loadedClass:"lazyloaded",loadingClass:"lazyloading",preloadClass:"lazypreload",errorClass:"lazyerror",autosizesClass:"lazyautosizes",srcAttr:"data-src",srcsetAttr:"data-srcset",sizesAttr:"data-sizes",minSize:40,customMedia:{},init:!0,expFactor:1.5,hFac:.8,loadMode:2,loadHidden:!0};d=a.lazySizesConfig||a.lazysizesConfig||{};for(b in c)b in d||(d[b]=c[b]);a.lazySizesConfig=d,k(function(){d.init&&F()})}(),c={cfg:d,autoSizer:E,loader:D,init:F,uP:w,aC:s,rC:t,hC:r,fire:v,gW:y,rAF:z}}}); |
@@ -12,3 +12,3 @@ (function(window, factory) { | ||
var lazySizesConfig; | ||
var lazysizes, lazySizesConfig; | ||
@@ -74,4 +74,10 @@ var docElem = document.documentElement; | ||
event.initCustomEvent(name, !noBubbles, !noCancelable, detail || {}); | ||
if(!detail){ | ||
detail = {}; | ||
} | ||
detail.instance = lazysizes; | ||
event.initCustomEvent(name, !noBubbles, !noCancelable, detail); | ||
elem.dispatchEvent(event); | ||
@@ -342,2 +348,3 @@ return event; | ||
(eLbottom || eLright || eLleft || eLtop) && | ||
(lazySizesConfig.loadHidden || getCSS(lazyloadElems[i], 'visibility') != 'hidden') && | ||
((isCompleted && isLoading < 3 && !elemExpandVal && (loadMode < 3 || lowRuns < 4)) || isNestedVisible(lazyloadElems[i], elemExpand))){ | ||
@@ -382,3 +389,3 @@ unveilElement(lazyloadElems[i]); | ||
var handleSources = function(source){ | ||
var customMedia, parent; | ||
var customMedia; | ||
@@ -394,9 +401,2 @@ var sourceSrcset = source[_getAttribute](lazySizesConfig.srcsetAttr); | ||
} | ||
//https://bugzilla.mozilla.org/show_bug.cgi?id=1170572 | ||
if(customMedia){ | ||
parent = source.parentNode; | ||
parent.insertBefore(source.cloneNode(), source); | ||
parent.removeChild(source); | ||
} | ||
}; | ||
@@ -452,3 +452,3 @@ | ||
if(srcset || isPicture){ | ||
if(isImg && (srcset || isPicture)){ | ||
updatePolyfill(elem, {src: src}); | ||
@@ -662,3 +662,4 @@ } | ||
hFac: 0.8, | ||
loadMode: 2 | ||
loadMode: 2, | ||
loadHidden: true, | ||
}; | ||
@@ -683,3 +684,3 @@ | ||
return { | ||
lazysizes = { | ||
cfg: lazySizesConfig, | ||
@@ -697,3 +698,5 @@ autoSizer: autoSizer, | ||
}; | ||
return lazysizes; | ||
} | ||
)); |
@@ -1,2 +0,2 @@ | ||
/*! lazysizes - v3.0.0 */ | ||
!function(a,b){var c=b(a,a.document);a.lazySizes=c,"object"==typeof module&&module.exports&&(module.exports=c)}(window,function(a,b){"use strict";if(b.getElementsByClassName){var c,d=b.documentElement,e=a.Date,f=a.HTMLPictureElement,g="addEventListener",h="getAttribute",i=a[g],j=a.setTimeout,k=a.requestAnimationFrame||j,l=a.requestIdleCallback,m=/^picture$/i,n=["load","error","lazyincluded","_lazyloaded"],o={},p=Array.prototype.forEach,q=function(a,b){return o[b]||(o[b]=new RegExp("(\\s|^)"+b+"(\\s|$)")),o[b].test(a[h]("class")||"")&&o[b]},r=function(a,b){q(a,b)||a.setAttribute("class",(a[h]("class")||"").trim()+" "+b)},s=function(a,b){var c;(c=q(a,b))&&a.setAttribute("class",(a[h]("class")||"").replace(c," "))},t=function(a,b,c){var d=c?g:"removeEventListener";c&&t(a,b),n.forEach(function(c){a[d](c,b)})},u=function(a,c,d,e,f){var g=b.createEvent("CustomEvent");return g.initCustomEvent(c,!e,!f,d||{}),a.dispatchEvent(g),g},v=function(b,d){var e;!f&&(e=a.picturefill||c.pf)?e({reevaluate:!0,elements:[b]}):d&&d.src&&(b.src=d.src)},w=function(a,b){return(getComputedStyle(a,null)||{})[b]},x=function(a,b,d){for(d=d||a.offsetWidth;d<c.minSize&&b&&!a._lazysizesWidth;)d=b.offsetWidth,b=b.parentNode;return d},y=function(){var a,c,d=[],e=[],f=d,g=function(){var b=f;for(f=d.length?e:d,a=!0,c=!1;b.length;)b.shift()();a=!1},h=function(d,e){a&&!e?d.apply(this,arguments):(f.push(d),c||(c=!0,(b.hidden?j:k)(g)))};return h._lsFlush=g,h}(),z=function(a,b){return b?function(){y(a)}:function(){var b=this,c=arguments;y(function(){a.apply(b,c)})}},A=function(a){var b,c=0,d=125,f=666,g=f,h=function(){b=!1,c=e.now(),a()},i=l?function(){l(h,{timeout:g}),g!==f&&(g=f)}:z(function(){j(h)},!0);return function(a){var f;(a=a===!0)&&(g=44),b||(b=!0,f=d-(e.now()-c),0>f&&(f=0),a||9>f&&l?i():j(i,f))}},B=function(a){var b,c,d=99,f=function(){b=null,a()},g=function(){var a=e.now()-c;d>a?j(g,d-a):(l||f)(f)};return function(){c=e.now(),b||(b=j(g,d))}},C=function(){var f,k,l,n,o,x,C,E,F,G,H,I,J,K,L,M=/^img$/i,N=/^iframe$/i,O="onscroll"in a&&!/glebot/.test(navigator.userAgent),P=0,Q=0,R=0,S=-1,T=function(a){R--,a&&a.target&&t(a.target,T),(!a||0>R||!a.target)&&(R=0)},U=function(a,c){var e,f=a,g="hidden"==w(b.body,"visibility")||"hidden"!=w(a,"visibility");for(F-=c,I+=c,G-=c,H+=c;g&&(f=f.offsetParent)&&f!=b.body&&f!=d;)g=(w(f,"opacity")||1)>0,g&&"visible"!=w(f,"overflow")&&(e=f.getBoundingClientRect(),g=H>e.left&&G<e.right&&I>e.top-1&&F<e.bottom+1);return g},V=function(){var a,e,g,i,j,m,n,p,q;if((o=c.loadMode)&&8>R&&(a=f.length)){e=0,S++,null==K&&("expand"in c||(c.expand=d.clientHeight>500&&d.clientWidth>500?500:370),J=c.expand,K=J*c.expFactor),K>Q&&1>R&&S>2&&o>2&&!b.hidden?(Q=K,S=0):Q=o>1&&S>1&&6>R?J:P;for(;a>e;e++)if(f[e]&&!f[e]._lazyRace)if(O)if((p=f[e][h]("data-expand"))&&(m=1*p)||(m=Q),q!==m&&(C=innerWidth+m*L,E=innerHeight+m,n=-1*m,q=m),g=f[e].getBoundingClientRect(),(I=g.bottom)>=n&&(F=g.top)<=E&&(H=g.right)>=n*L&&(G=g.left)<=C&&(I||H||G||F)&&(l&&3>R&&!p&&(3>o||4>S)||U(f[e],m))){if(ba(f[e]),j=!0,R>9)break}else!j&&l&&!i&&4>R&&4>S&&o>2&&(k[0]||c.preloadAfterLoad)&&(k[0]||!p&&(I||H||G||F||"auto"!=f[e][h](c.sizesAttr)))&&(i=k[0]||f[e]);else ba(f[e]);i&&!j&&ba(i)}},W=A(V),X=function(a){r(a.target,c.loadedClass),s(a.target,c.loadingClass),t(a.target,Z)},Y=z(X),Z=function(a){Y({target:a.target})},$=function(a,b){try{a.contentWindow.location.replace(b)}catch(c){a.src=b}},_=function(a){var b,d,e=a[h](c.srcsetAttr);(b=c.customMedia[a[h]("data-media")||a[h]("media")])&&a.setAttribute("media",b),e&&a.setAttribute("srcset",e),b&&(d=a.parentNode,d.insertBefore(a.cloneNode(),a),d.removeChild(a))},aa=z(function(a,b,d,e,f){var g,i,k,l,o,q;(o=u(a,"lazybeforeunveil",b)).defaultPrevented||(e&&(d?r(a,c.autosizesClass):a.setAttribute("sizes",e)),i=a[h](c.srcsetAttr),g=a[h](c.srcAttr),f&&(k=a.parentNode,l=k&&m.test(k.nodeName||"")),q=b.firesLoad||"src"in a&&(i||g||l),o={target:a},q&&(t(a,T,!0),clearTimeout(n),n=j(T,2500),r(a,c.loadingClass),t(a,Z,!0)),l&&p.call(k.getElementsByTagName("source"),_),i?a.setAttribute("srcset",i):g&&!l&&(N.test(a.nodeName)?$(a,g):a.src=g),(i||l)&&v(a,{src:g})),a._lazyRace&&delete a._lazyRace,s(a,c.lazyClass),y(function(){(!q||a.complete&&a.naturalWidth>1)&&(q?T(o):R--,X(o))},!0)}),ba=function(a){var b,d=M.test(a.nodeName),e=d&&(a[h](c.sizesAttr)||a[h]("sizes")),f="auto"==e;(!f&&l||!d||!a.src&&!a.srcset||a.complete||q(a,c.errorClass))&&(b=u(a,"lazyunveilread").detail,f&&D.updateElem(a,!0,a.offsetWidth),a._lazyRace=!0,R++,aa(a,b,f,e,d))},ca=function(){if(!l){if(e.now()-x<999)return void j(ca,999);var a=B(function(){c.loadMode=3,W()});l=!0,c.loadMode=3,W(),i("scroll",function(){3==c.loadMode&&(c.loadMode=2),a()},!0)}};return{_:function(){x=e.now(),f=b.getElementsByClassName(c.lazyClass),k=b.getElementsByClassName(c.lazyClass+" "+c.preloadClass),L=c.hFac,i("scroll",W,!0),i("resize",W,!0),a.MutationObserver?new MutationObserver(W).observe(d,{childList:!0,subtree:!0,attributes:!0}):(d[g]("DOMNodeInserted",W,!0),d[g]("DOMAttrModified",W,!0),setInterval(W,999)),i("hashchange",W,!0),["focus","mouseover","click","load","transitionend","animationend","webkitAnimationEnd"].forEach(function(a){b[g](a,W,!0)}),/d$|^c/.test(b.readyState)?ca():(i("load",ca),b[g]("DOMContentLoaded",W),j(ca,2e4)),f.length?(V(),y._lsFlush()):W()},checkElems:W,unveil:ba}}(),D=function(){var a,d=z(function(a,b,c,d){var e,f,g;if(a._lazysizesWidth=d,d+="px",a.setAttribute("sizes",d),m.test(b.nodeName||""))for(e=b.getElementsByTagName("source"),f=0,g=e.length;g>f;f++)e[f].setAttribute("sizes",d);c.detail.dataAttr||v(a,c.detail)}),e=function(a,b,c){var e,f=a.parentNode;f&&(c=x(a,f,c),e=u(a,"lazybeforesizes",{width:c,dataAttr:!!b}),e.defaultPrevented||(c=e.detail.width,c&&c!==a._lazysizesWidth&&d(a,f,e,c)))},f=function(){var b,c=a.length;if(c)for(b=0;c>b;b++)e(a[b])},g=B(f);return{_:function(){a=b.getElementsByClassName(c.autosizesClass),i("resize",g)},checkElems:g,updateElem:e}}(),E=function(){E.i||(E.i=!0,D._(),C._())};return function(){var b,d={lazyClass:"lazyload",loadedClass:"lazyloaded",loadingClass:"lazyloading",preloadClass:"lazypreload",errorClass:"lazyerror",autosizesClass:"lazyautosizes",srcAttr:"data-src",srcsetAttr:"data-srcset",sizesAttr:"data-sizes",minSize:40,customMedia:{},init:!0,expFactor:1.5,hFac:.8,loadMode:2};c=a.lazySizesConfig||a.lazysizesConfig||{};for(b in d)b in c||(c[b]=d[b]);a.lazySizesConfig=c,j(function(){c.init&&E()})}(),{cfg:c,autoSizer:D,loader:C,init:E,uP:v,aC:r,rC:s,hC:q,fire:u,gW:x,rAF:y}}}); | ||
/*! lazysizes - v4.0.0-rc1 */ | ||
!function(a,b){var c=b(a,a.document);a.lazySizes=c,"object"==typeof module&&module.exports&&(module.exports=c)}(window,function(a,b){"use strict";if(b.getElementsByClassName){var c,d,e=b.documentElement,f=a.Date,g=a.HTMLPictureElement,h="addEventListener",i="getAttribute",j=a[h],k=a.setTimeout,l=a.requestAnimationFrame||k,m=a.requestIdleCallback,n=/^picture$/i,o=["load","error","lazyincluded","_lazyloaded"],p={},q=Array.prototype.forEach,r=function(a,b){return p[b]||(p[b]=new RegExp("(\\s|^)"+b+"(\\s|$)")),p[b].test(a[i]("class")||"")&&p[b]},s=function(a,b){r(a,b)||a.setAttribute("class",(a[i]("class")||"").trim()+" "+b)},t=function(a,b){var c;(c=r(a,b))&&a.setAttribute("class",(a[i]("class")||"").replace(c," "))},u=function(a,b,c){var d=c?h:"removeEventListener";c&&u(a,b),o.forEach(function(c){a[d](c,b)})},v=function(a,d,e,f,g){var h=b.createEvent("CustomEvent");return e||(e={}),e.instance=c,h.initCustomEvent(d,!f,!g,e),a.dispatchEvent(h),h},w=function(b,c){var e;!g&&(e=a.picturefill||d.pf)?e({reevaluate:!0,elements:[b]}):c&&c.src&&(b.src=c.src)},x=function(a,b){return(getComputedStyle(a,null)||{})[b]},y=function(a,b,c){for(c=c||a.offsetWidth;c<d.minSize&&b&&!a._lazysizesWidth;)c=b.offsetWidth,b=b.parentNode;return c},z=function(){var a,c,d=[],e=[],f=d,g=function(){var b=f;for(f=d.length?e:d,a=!0,c=!1;b.length;)b.shift()();a=!1},h=function(d,e){a&&!e?d.apply(this,arguments):(f.push(d),c||(c=!0,(b.hidden?k:l)(g)))};return h._lsFlush=g,h}(),A=function(a,b){return b?function(){z(a)}:function(){var b=this,c=arguments;z(function(){a.apply(b,c)})}},B=function(a){var b,c=0,d=125,e=666,g=e,h=function(){b=!1,c=f.now(),a()},i=m?function(){m(h,{timeout:g}),g!==e&&(g=e)}:A(function(){k(h)},!0);return function(a){var e;(a=a===!0)&&(g=44),b||(b=!0,e=d-(f.now()-c),0>e&&(e=0),a||9>e&&m?i():k(i,e))}},C=function(a){var b,c,d=99,e=function(){b=null,a()},g=function(){var a=f.now()-c;d>a?k(g,d-a):(m||e)(e)};return function(){c=f.now(),b||(b=k(g,d))}},D=function(){var c,g,l,m,o,p,y,D,F,G,H,I,J,K,L,M=/^img$/i,N=/^iframe$/i,O="onscroll"in a&&!/glebot/.test(navigator.userAgent),P=0,Q=0,R=0,S=-1,T=function(a){R--,a&&a.target&&u(a.target,T),(!a||0>R||!a.target)&&(R=0)},U=function(a,c){var d,f=a,g="hidden"==x(b.body,"visibility")||"hidden"!=x(a,"visibility");for(F-=c,I+=c,G-=c,H+=c;g&&(f=f.offsetParent)&&f!=b.body&&f!=e;)g=(x(f,"opacity")||1)>0,g&&"visible"!=x(f,"overflow")&&(d=f.getBoundingClientRect(),g=H>d.left&&G<d.right&&I>d.top-1&&F<d.bottom+1);return g},V=function(){var a,f,h,j,k,m,n,p,q;if((o=d.loadMode)&&8>R&&(a=c.length)){f=0,S++,null==K&&("expand"in d||(d.expand=e.clientHeight>500&&e.clientWidth>500?500:370),J=d.expand,K=J*d.expFactor),K>Q&&1>R&&S>2&&o>2&&!b.hidden?(Q=K,S=0):Q=o>1&&S>1&&6>R?J:P;for(;a>f;f++)if(c[f]&&!c[f]._lazyRace)if(O)if((p=c[f][i]("data-expand"))&&(m=1*p)||(m=Q),q!==m&&(y=innerWidth+m*L,D=innerHeight+m,n=-1*m,q=m),h=c[f].getBoundingClientRect(),(I=h.bottom)>=n&&(F=h.top)<=D&&(H=h.right)>=n*L&&(G=h.left)<=y&&(I||H||G||F)&&(d.loadHidden||"hidden"!=x(c[f],"visibility"))&&(l&&3>R&&!p&&(3>o||4>S)||U(c[f],m))){if(ba(c[f]),k=!0,R>9)break}else!k&&l&&!j&&4>R&&4>S&&o>2&&(g[0]||d.preloadAfterLoad)&&(g[0]||!p&&(I||H||G||F||"auto"!=c[f][i](d.sizesAttr)))&&(j=g[0]||c[f]);else ba(c[f]);j&&!k&&ba(j)}},W=B(V),X=function(a){s(a.target,d.loadedClass),t(a.target,d.loadingClass),u(a.target,Z)},Y=A(X),Z=function(a){Y({target:a.target})},$=function(a,b){try{a.contentWindow.location.replace(b)}catch(c){a.src=b}},_=function(a){var b,c=a[i](d.srcsetAttr);(b=d.customMedia[a[i]("data-media")||a[i]("media")])&&a.setAttribute("media",b),c&&a.setAttribute("srcset",c)},aa=A(function(a,b,c,e,f){var g,h,j,l,o,p;(o=v(a,"lazybeforeunveil",b)).defaultPrevented||(e&&(c?s(a,d.autosizesClass):a.setAttribute("sizes",e)),h=a[i](d.srcsetAttr),g=a[i](d.srcAttr),f&&(j=a.parentNode,l=j&&n.test(j.nodeName||"")),p=b.firesLoad||"src"in a&&(h||g||l),o={target:a},p&&(u(a,T,!0),clearTimeout(m),m=k(T,2500),s(a,d.loadingClass),u(a,Z,!0)),l&&q.call(j.getElementsByTagName("source"),_),h?a.setAttribute("srcset",h):g&&!l&&(N.test(a.nodeName)?$(a,g):a.src=g),f&&(h||l)&&w(a,{src:g})),a._lazyRace&&delete a._lazyRace,t(a,d.lazyClass),z(function(){(!p||a.complete&&a.naturalWidth>1)&&(p?T(o):R--,X(o))},!0)}),ba=function(a){var b,c=M.test(a.nodeName),e=c&&(a[i](d.sizesAttr)||a[i]("sizes")),f="auto"==e;(!f&&l||!c||!a.src&&!a.srcset||a.complete||r(a,d.errorClass))&&(b=v(a,"lazyunveilread").detail,f&&E.updateElem(a,!0,a.offsetWidth),a._lazyRace=!0,R++,aa(a,b,f,e,c))},ca=function(){if(!l){if(f.now()-p<999)return void k(ca,999);var a=C(function(){d.loadMode=3,W()});l=!0,d.loadMode=3,W(),j("scroll",function(){3==d.loadMode&&(d.loadMode=2),a()},!0)}};return{_:function(){p=f.now(),c=b.getElementsByClassName(d.lazyClass),g=b.getElementsByClassName(d.lazyClass+" "+d.preloadClass),L=d.hFac,j("scroll",W,!0),j("resize",W,!0),a.MutationObserver?new MutationObserver(W).observe(e,{childList:!0,subtree:!0,attributes:!0}):(e[h]("DOMNodeInserted",W,!0),e[h]("DOMAttrModified",W,!0),setInterval(W,999)),j("hashchange",W,!0),["focus","mouseover","click","load","transitionend","animationend","webkitAnimationEnd"].forEach(function(a){b[h](a,W,!0)}),/d$|^c/.test(b.readyState)?ca():(j("load",ca),b[h]("DOMContentLoaded",W),k(ca,2e4)),c.length?(V(),z._lsFlush()):W()},checkElems:W,unveil:ba}}(),E=function(){var a,c=A(function(a,b,c,d){var e,f,g;if(a._lazysizesWidth=d,d+="px",a.setAttribute("sizes",d),n.test(b.nodeName||""))for(e=b.getElementsByTagName("source"),f=0,g=e.length;g>f;f++)e[f].setAttribute("sizes",d);c.detail.dataAttr||w(a,c.detail)}),e=function(a,b,d){var e,f=a.parentNode;f&&(d=y(a,f,d),e=v(a,"lazybeforesizes",{width:d,dataAttr:!!b}),e.defaultPrevented||(d=e.detail.width,d&&d!==a._lazysizesWidth&&c(a,f,e,d)))},f=function(){var b,c=a.length;if(c)for(b=0;c>b;b++)e(a[b])},g=C(f);return{_:function(){a=b.getElementsByClassName(d.autosizesClass),j("resize",g)},checkElems:g,updateElem:e}}(),F=function(){F.i||(F.i=!0,E._(),D._())};return function(){var b,c={lazyClass:"lazyload",loadedClass:"lazyloaded",loadingClass:"lazyloading",preloadClass:"lazypreload",errorClass:"lazyerror",autosizesClass:"lazyautosizes",srcAttr:"data-src",srcsetAttr:"data-srcset",sizesAttr:"data-sizes",minSize:40,customMedia:{},init:!0,expFactor:1.5,hFac:.8,loadMode:2,loadHidden:!0};d=a.lazySizesConfig||a.lazysizesConfig||{};for(b in c)b in d||(d[b]=c[b]);a.lazySizesConfig=d,k(function(){d.init&&F()})}(),c={cfg:d,autoSizer:E,loader:D,init:F,uP:w,aC:s,rC:t,hC:r,fire:v,gW:y,rAF:z}}}); |
{ | ||
"name": "lazysizes", | ||
"version": "3.0.0", | ||
"version": "4.0.0-rc1", | ||
"filename": "lazysizes.min.js", | ||
"license": "MIT", | ||
"author": "Alexander Farkas <info@corrupt-system.de>", | ||
@@ -6,0 +7,0 @@ "repository": { |
@@ -1,2 +0,17 @@ | ||
(function(window, document){ | ||
(function(window, factory) { | ||
var globalInstall = function(){ | ||
factory(window.lazySizes); | ||
window.removeEventListener('lazyunveilread', globalInstall, true); | ||
}; | ||
factory = factory.bind(null, window, window.document); | ||
if(typeof module == 'object' && module.exports){ | ||
factory(require('lazysizes')); | ||
} else if(window.lazySizes) { | ||
globalInstall(); | ||
} else { | ||
window.addEventListener('lazyunveilread', globalInstall, true); | ||
} | ||
}(window, function(window, document, lazySizes) { | ||
'use strict'; | ||
@@ -27,22 +42,6 @@ | ||
var addClass = function(elem, className){ | ||
if($){ | ||
$(elem).addClass(className); | ||
} else if(window.lazySizes){ | ||
lazySizes.aC(elem, className); | ||
} else { | ||
elem.classList.add(className); | ||
} | ||
}; | ||
var addClass = lazySizes.aC; | ||
var removeClass = lazySizes.rC; | ||
var lazySizesConfig = lazySizes.cfg; | ||
var removeClass = function(elem, className){ | ||
if($){ | ||
$(elem).removeClass(className); | ||
} else if(window.lazySizes){ | ||
lazySizes.rC(elem, className); | ||
} else { | ||
elem.classList.remove(className); | ||
} | ||
}; | ||
function AspectRatio(){ | ||
@@ -121,3 +120,3 @@ this.ratioElems = document.getElementsByClassName('lazyaspectratio'); | ||
if(window.lazySizesConfig && lazySizesConfig.customMedia[customMedia]){ | ||
if(lazySizesConfig.customMedia[customMedia]){ | ||
customMedia = lazySizesConfig.customMedia[customMedia]; | ||
@@ -211,2 +210,2 @@ } | ||
})(window, document); | ||
})); |
@@ -1,2 +0,2 @@ | ||
/*! lazysizes - v3.0.0 */ | ||
!function(a,b){"use strict";function c(){this.ratioElems=b.getElementsByClassName("lazyaspectratio"),this._setupEvents(),this.processImages()}if(a.addEventListener){var d,e,f,g=Array.prototype.forEach,h=/^picture$/i,i="data-aspectratio",j="img["+i+"]",k=function(b){return a.matchMedia?(k=function(a){return!a||(matchMedia(a)||{}).matches})(b):a.Modernizr&&Modernizr.mq?!b||Modernizr.mq(b):!b},l=function(b,c){f?f(b).addClass(c):a.lazySizes?lazySizes.aC(b,c):b.classList.add(c)},m=function(b,c){f?f(b).removeClass(c):a.lazySizes?lazySizes.rC(b,c):b.classList.remove(c)};c.prototype={_setupEvents:function(){var a=this,c=function(b){b.naturalWidth<36?a.addAspectRatio(b,!0):a.removeAspectRatio(b,!0)},d=function(){a.processImages()};b.addEventListener("load",function(a){a.target.getAttribute&&a.target.getAttribute(i)&&c(a.target)},!0),addEventListener("resize",function(){var b,d=function(){g.call(a.ratioElems,c)};return function(){clearTimeout(b),b=setTimeout(d,99)}}()),b.addEventListener("DOMContentLoaded",d),addEventListener("load",d)},processImages:function(a){var c,d;a||(a=b),c="length"in a&&!a.nodeName?a:a.querySelectorAll(j);for(d=0;d<c.length;d++)c[d].naturalWidth>36?this.removeAspectRatio(c[d]):this.addAspectRatio(c[d])},getSelectedRatio:function(b){var c,d,e,f,g,j=b.parentNode;if(j&&h.test(j.nodeName||""))for(e=j.getElementsByTagName("source"),c=0,d=e.length;d>c;c++)if(f=e[c].getAttribute("data-media")||e[c].getAttribute("media"),a.lazySizesConfig&&lazySizesConfig.customMedia[f]&&(f=lazySizesConfig.customMedia[f]),k(f)){g=e[c].getAttribute(i);break}return g||b.getAttribute(i)||""},parseRatio:function(){var a=/^\s*([+\d\.]+)(\s*[\/x]\s*([+\d\.]+))?\s*$/,b={};return function(c){return!b[c]&&c.match(a)&&(RegExp.$3?b[c]=RegExp.$1/RegExp.$3:b[c]=1*RegExp.$1),b[c]}}(),addAspectRatio:function(b,c){var d,e=b.offsetWidth,f=b.offsetHeight;return c||l(b,"lazyaspectratio"),36>e&&0>=f?void((e||f&&a.console)&&console.log("Define width or height of image, so we can calculate the other dimension")):(d=this.getSelectedRatio(b),d=this.parseRatio(d),void(d&&(e?b.style.height=e/d+"px":b.style.width=f*d+"px")))},removeAspectRatio:function(a){m(a,"lazyaspectratio"),a.style.height="",a.style.width="",a.removeAttribute(i)}},e=function(){f=a.jQuery||a.Zepto||a.shoestring||a.$,f&&f.fn&&!f.fn.imageRatio&&f.fn.filter&&f.fn.add&&f.fn.find?f.fn.imageRatio=function(){return d.processImages(this.find(j).add(this.filter(j))),this}:f=!1},e(),setTimeout(e),d=new c,a.imageRatio=d,"object"==typeof module&&module.exports?module.exports=d:"function"==typeof define&&define.amd&&define(d)}}(window,document); | ||
/*! lazysizes - v4.0.0-rc1 */ | ||
!function(a,b){var c=function(){b(a.lazySizes),a.removeEventListener("lazyunveilread",c,!0)};b=b.bind(null,a,a.document),"object"==typeof module&&module.exports?b(require("lazysizes")):a.lazySizes?c():a.addEventListener("lazyunveilread",c,!0)}(window,function(a,b,c){"use strict";function d(){this.ratioElems=b.getElementsByClassName("lazyaspectratio"),this._setupEvents(),this.processImages()}if(a.addEventListener){var e,f,g,h=Array.prototype.forEach,i=/^picture$/i,j="data-aspectratio",k="img["+j+"]",l=function(b){return a.matchMedia?(l=function(a){return!a||(matchMedia(a)||{}).matches})(b):a.Modernizr&&Modernizr.mq?!b||Modernizr.mq(b):!b},m=c.aC,n=c.rC,o=c.cfg;d.prototype={_setupEvents:function(){var a=this,c=function(b){b.naturalWidth<36?a.addAspectRatio(b,!0):a.removeAspectRatio(b,!0)},d=function(){a.processImages()};b.addEventListener("load",function(a){a.target.getAttribute&&a.target.getAttribute(j)&&c(a.target)},!0),addEventListener("resize",function(){var b,d=function(){h.call(a.ratioElems,c)};return function(){clearTimeout(b),b=setTimeout(d,99)}}()),b.addEventListener("DOMContentLoaded",d),addEventListener("load",d)},processImages:function(a){var c,d;a||(a=b),c="length"in a&&!a.nodeName?a:a.querySelectorAll(k);for(d=0;d<c.length;d++)c[d].naturalWidth>36?this.removeAspectRatio(c[d]):this.addAspectRatio(c[d])},getSelectedRatio:function(a){var b,c,d,e,f,g=a.parentNode;if(g&&i.test(g.nodeName||""))for(d=g.getElementsByTagName("source"),b=0,c=d.length;c>b;b++)if(e=d[b].getAttribute("data-media")||d[b].getAttribute("media"),o.customMedia[e]&&(e=o.customMedia[e]),l(e)){f=d[b].getAttribute(j);break}return f||a.getAttribute(j)||""},parseRatio:function(){var a=/^\s*([+\d\.]+)(\s*[\/x]\s*([+\d\.]+))?\s*$/,b={};return function(c){return!b[c]&&c.match(a)&&(RegExp.$3?b[c]=RegExp.$1/RegExp.$3:b[c]=1*RegExp.$1),b[c]}}(),addAspectRatio:function(b,c){var d,e=b.offsetWidth,f=b.offsetHeight;return c||m(b,"lazyaspectratio"),36>e&&0>=f?void((e||f&&a.console)&&console.log("Define width or height of image, so we can calculate the other dimension")):(d=this.getSelectedRatio(b),d=this.parseRatio(d),void(d&&(e?b.style.height=e/d+"px":b.style.width=f*d+"px")))},removeAspectRatio:function(a){n(a,"lazyaspectratio"),a.style.height="",a.style.width="",a.removeAttribute(j)}},f=function(){g=a.jQuery||a.Zepto||a.shoestring||a.$,g&&g.fn&&!g.fn.imageRatio&&g.fn.filter&&g.fn.add&&g.fn.find?g.fn.imageRatio=function(){return e.processImages(this.find(k).add(this.filter(k))),this}:g=!1},f(),setTimeout(f),e=new d,a.imageRatio=e,"object"==typeof module&&module.exports?module.exports=e:"function"==typeof define&&define.amd&&define(e)}}); |
@@ -1,2 +0,2 @@ | ||
#lazysizes aspectratio extension | ||
# lazysizes aspectratio extension | ||
@@ -7,3 +7,3 @@ This plugin helps to pre-occupy the space needed for an image by calculating the height from the image width or the width from the height (This means the width or height has to be calculable before the image is loaded). This can serve as an alternative to the different CSS intrinsic ratio patterns. | ||
##Markup API: | ||
## Markup API: | ||
@@ -51,3 +51,3 @@ The value of the ``data-aspectratio`` has to be defined as the *width* divided by the *height* of the image. | ||
##JS API | ||
## JS API | ||
@@ -54,0 +54,0 @@ In case new elements are added to the DOM the global ``imageRatio.processImages`` method can be used. The method takes either an element representing the container/wrapper of the new elements or a list of image elements: |
@@ -1,2 +0,17 @@ | ||
(function(window, document){ | ||
(function(window, factory) { | ||
var globalInstall = function(){ | ||
factory(window.lazySizes); | ||
window.removeEventListener('lazyunveilread', globalInstall, true); | ||
}; | ||
factory = factory.bind(null, window, window.document); | ||
if(typeof module == 'object' && module.exports){ | ||
factory(require('lazysizes')); | ||
} else if(window.lazySizes) { | ||
globalInstall(); | ||
} else { | ||
window.addEventListener('lazyunveilread', globalInstall, true); | ||
} | ||
}(window, function(window, document, lazySizes) { | ||
'use strict'; | ||
@@ -9,3 +24,2 @@ if(!window.addEventListener){return;} | ||
var connect, disconnect, observer, connected; | ||
var lazySizes = window.lazySizes; | ||
var lsCfg = lazySizes.cfg; | ||
@@ -110,2 +124,2 @@ var attributes = {'data-bgset': 1, 'data-include': 1, 'data-poster': 1, 'data-bg': 1, 'data-script': 1}; | ||
addEventListener('lazybeforeunveil', addObserver); | ||
})(window, document); | ||
})); |
@@ -1,2 +0,2 @@ | ||
/*! lazysizes - v3.0.0 */ | ||
!function(a,b){"use strict";if(a.addEventListener){var c=a.requestAnimationFrame||setTimeout,d=function(){var e,f,g,h,i=a.lazySizes,j=i.cfg,k={"data-bgset":1,"data-include":1,"data-poster":1,"data-bg":1,"data-script":1},l="(\\s|^)("+j.loadedClass,m=b.documentElement,n=function(a){c(function(){i.rC(a,j.loadedClass),j.unloadedClass&&i.rC(a,j.unloadedClass),i.aC(a,j.lazyClass)})},o=function(a){var b,c,d,e;for(b=0,c=a.length;c>b;b++)d=a[b],e=d.target,e.getAttribute(d.attributeName)&&("source"==e.localName&&e.parentNode&&(e=e.parentNode.querySelector("img")),e&&l.test(e.className)&&n(e))};j.unloadedClass&&(l+="|"+j.unloadedClass),l+="|"+j.loadingClass+")(\\s|$)",l=new RegExp(l),k[j.srcAttr]=1,k[j.srcsetAttr]=1,a.MutationObserver?(g=new MutationObserver(o),e=function(){h||(h=!0,g.observe(m,{subtree:!0,attributes:!0,attributeFilter:Object.keys(k)}))},f=function(){h&&(h=!1,g.disconnect())}):(m.addEventListener("DOMAttrModified",function(){var a,b=[],c=function(){o(b),b=[],a=!1};return function(d){h&&k[d.attrName]&&d.newValue&&(b.push({target:d.target,attributeName:d.attrName}),a||(setTimeout(c),a=!0))}}(),!0),e=function(){h=!0},f=function(){h=!1}),addEventListener("lazybeforeunveil",f,!0),addEventListener("lazybeforeunveil",e),addEventListener("lazybeforesizes",f,!0),addEventListener("lazybeforesizes",e),e(),removeEventListener("lazybeforeunveil",d)};addEventListener("lazybeforeunveil",d)}}(window,document); | ||
/*! lazysizes - v4.0.0-rc1 */ | ||
!function(a,b){var c=function(){b(a.lazySizes),a.removeEventListener("lazyunveilread",c,!0)};b=b.bind(null,a,a.document),"object"==typeof module&&module.exports?b(require("lazysizes")):a.lazySizes?c():a.addEventListener("lazyunveilread",c,!0)}(window,function(a,b,c){"use strict";if(a.addEventListener){var d=a.requestAnimationFrame||setTimeout,e=function(){var f,g,h,i,j=c.cfg,k={"data-bgset":1,"data-include":1,"data-poster":1,"data-bg":1,"data-script":1},l="(\\s|^)("+j.loadedClass,m=b.documentElement,n=function(a){d(function(){c.rC(a,j.loadedClass),j.unloadedClass&&c.rC(a,j.unloadedClass),c.aC(a,j.lazyClass)})},o=function(a){var b,c,d,e;for(b=0,c=a.length;c>b;b++)d=a[b],e=d.target,e.getAttribute(d.attributeName)&&("source"==e.localName&&e.parentNode&&(e=e.parentNode.querySelector("img")),e&&l.test(e.className)&&n(e))};j.unloadedClass&&(l+="|"+j.unloadedClass),l+="|"+j.loadingClass+")(\\s|$)",l=new RegExp(l),k[j.srcAttr]=1,k[j.srcsetAttr]=1,a.MutationObserver?(h=new MutationObserver(o),f=function(){i||(i=!0,h.observe(m,{subtree:!0,attributes:!0,attributeFilter:Object.keys(k)}))},g=function(){i&&(i=!1,h.disconnect())}):(m.addEventListener("DOMAttrModified",function(){var a,b=[],c=function(){o(b),b=[],a=!1};return function(d){i&&k[d.attrName]&&d.newValue&&(b.push({target:d.target,attributeName:d.attrName}),a||(setTimeout(c),a=!0))}}(),!0),f=function(){i=!0},g=function(){i=!1}),addEventListener("lazybeforeunveil",g,!0),addEventListener("lazybeforeunveil",f),addEventListener("lazybeforesizes",g,!0),addEventListener("lazybeforesizes",f),f(),removeEventListener("lazybeforeunveil",e)};addEventListener("lazybeforeunveil",e)}}); |
@@ -1,2 +0,2 @@ | ||
#lazysizes attribute change / re-initialization extension | ||
# lazysizes attribute change / re-initialization extension | ||
@@ -3,0 +3,0 @@ In case you are changing the ``data-src``/``data-srcset`` attributes of already transformed lazyload elements dynamically, you normally also must re-add the ``lazyload`` class to the element. |
@@ -1,2 +0,17 @@ | ||
(function(){ | ||
(function(window, factory) { | ||
var globalInstall = function(){ | ||
factory(window.lazySizes); | ||
window.removeEventListener('lazyunveilread', globalInstall, true); | ||
}; | ||
factory = factory.bind(null, window, window.document); | ||
if(typeof module == 'object' && module.exports){ | ||
factory(require('lazysizes')); | ||
} else if(window.lazySizes) { | ||
globalInstall(); | ||
} else { | ||
window.addEventListener('lazyunveilread', globalInstall, true); | ||
} | ||
}(window, function(window, document, lazySizes) { | ||
'use strict'; | ||
@@ -138,2 +153,3 @@ if(!window.addEventListener){return;} | ||
window.addEventListener('lazybeforesizes', function(e){ | ||
if(e.detail.instance != lazySizes){return;} | ||
if(e.target._lazybgset && e.detail.dataAttr){ | ||
@@ -157,5 +173,5 @@ var elem = e.target._lazybgset; | ||
document.documentElement.addEventListener('lazybeforesizes', function(e){ | ||
if(e.defaultPrevented || !e.target._lazybgset){return;} | ||
if(e.defaultPrevented || !e.target._lazybgset || e.detail.instance != lazySizes){return;} | ||
e.detail.width = proxyWidth(e.target._lazybgset); | ||
}); | ||
})(); | ||
})); |
@@ -1,2 +0,2 @@ | ||
/*! lazysizes - v3.0.0 */ | ||
!function(){"use strict";if(window.addEventListener){var a=/\s+/g,b=/\s*\|\s+|\s+\|\s*/g,c=/^(.+?)(?:\s+\[\s*(.+?)\s*\])?$/,d=/\(|\)|'/,e={contain:1,cover:1},f=function(a){var b=lazySizes.gW(a,a.parentNode);return(!a._lazysizesWidth||b>a._lazysizesWidth)&&(a._lazysizesWidth=b),a._lazysizesWidth},g=function(a){var b;return b=(getComputedStyle(a)||{getPropertyValue:function(){}}).getPropertyValue("background-size"),!e[b]&&e[a.style.backgroundSize]&&(b=a.style.backgroundSize),b},h=function(d,e,f){var g=document.createElement("picture"),h=e.getAttribute(lazySizesConfig.sizesAttr),i=e.getAttribute("data-ratio"),j=e.getAttribute("data-optimumx");e._lazybgset&&e._lazybgset.parentNode==e&&e.removeChild(e._lazybgset),Object.defineProperty(f,"_lazybgset",{value:e,writable:!0}),Object.defineProperty(e,"_lazybgset",{value:g,writable:!0}),d=d.replace(a," ").split(b),g.style.display="none",f.className=lazySizesConfig.lazyClass,1!=d.length||h||(h="auto"),d.forEach(function(a){var b=document.createElement("source");h&&"auto"!=h&&b.setAttribute("sizes",h),a.match(c)&&(b.setAttribute(lazySizesConfig.srcsetAttr,RegExp.$1),RegExp.$2&&b.setAttribute("media",lazySizesConfig.customMedia[RegExp.$2]||RegExp.$2)),g.appendChild(b)}),h&&(f.setAttribute(lazySizesConfig.sizesAttr,h),e.removeAttribute(lazySizesConfig.sizesAttr),e.removeAttribute("sizes")),j&&f.setAttribute("data-optimumx",j),i&&f.setAttribute("data-ratio",i),g.appendChild(f),e.appendChild(g)},i=function(a){if(a.target._lazybgset){var b=a.target,c=b._lazybgset,e=b.currentSrc||b.src;e&&(c.style.backgroundImage="url("+(d.test(e)?JSON.stringify(e):e)+")"),b._lazybgsetLoading&&(lazySizes.fire(c,"_lazyloaded",{},!1,!0),delete b._lazybgsetLoading)}};addEventListener("lazybeforeunveil",function(a){var b,c,d;!a.defaultPrevented&&(b=a.target.getAttribute("data-bgset"))&&(d=a.target,c=document.createElement("img"),c.alt="",c._lazybgsetLoading=!0,a.detail.firesLoad=!0,h(b,d,c),setTimeout(function(){lazySizes.loader.unveil(c),lazySizes.rAF(function(){lazySizes.fire(c,"_lazyloaded",{},!0,!0),c.complete&&i({target:c})})}))}),document.addEventListener("load",i,!0),window.addEventListener("lazybeforesizes",function(a){if(a.target._lazybgset&&a.detail.dataAttr){var b=a.target._lazybgset,c=g(b);e[c]&&(a.target._lazysizesParentFit=c,lazySizes.rAF(function(){a.target.setAttribute("data-parent-fit",c),a.target._lazysizesParentFit&&delete a.target._lazysizesParentFit}))}},!0),document.documentElement.addEventListener("lazybeforesizes",function(a){!a.defaultPrevented&&a.target._lazybgset&&(a.detail.width=f(a.target._lazybgset))})}}(); | ||
/*! lazysizes - v4.0.0-rc1 */ | ||
!function(a,b){var c=function(){b(a.lazySizes),a.removeEventListener("lazyunveilread",c,!0)};b=b.bind(null,a,a.document),"object"==typeof module&&module.exports?b(require("lazysizes")):a.lazySizes?c():a.addEventListener("lazyunveilread",c,!0)}(window,function(a,b,c){"use strict";if(a.addEventListener){var d=/\s+/g,e=/\s*\|\s+|\s+\|\s*/g,f=/^(.+?)(?:\s+\[\s*(.+?)\s*\])?$/,g=/\(|\)|'/,h={contain:1,cover:1},i=function(a){var b=c.gW(a,a.parentNode);return(!a._lazysizesWidth||b>a._lazysizesWidth)&&(a._lazysizesWidth=b),a._lazysizesWidth},j=function(a){var b;return b=(getComputedStyle(a)||{getPropertyValue:function(){}}).getPropertyValue("background-size"),!h[b]&&h[a.style.backgroundSize]&&(b=a.style.backgroundSize),b},k=function(a,c,g){var h=b.createElement("picture"),i=c.getAttribute(lazySizesConfig.sizesAttr),j=c.getAttribute("data-ratio"),k=c.getAttribute("data-optimumx");c._lazybgset&&c._lazybgset.parentNode==c&&c.removeChild(c._lazybgset),Object.defineProperty(g,"_lazybgset",{value:c,writable:!0}),Object.defineProperty(c,"_lazybgset",{value:h,writable:!0}),a=a.replace(d," ").split(e),h.style.display="none",g.className=lazySizesConfig.lazyClass,1!=a.length||i||(i="auto"),a.forEach(function(a){var c=b.createElement("source");i&&"auto"!=i&&c.setAttribute("sizes",i),a.match(f)&&(c.setAttribute(lazySizesConfig.srcsetAttr,RegExp.$1),RegExp.$2&&c.setAttribute("media",lazySizesConfig.customMedia[RegExp.$2]||RegExp.$2)),h.appendChild(c)}),i&&(g.setAttribute(lazySizesConfig.sizesAttr,i),c.removeAttribute(lazySizesConfig.sizesAttr),c.removeAttribute("sizes")),k&&g.setAttribute("data-optimumx",k),j&&g.setAttribute("data-ratio",j),h.appendChild(g),c.appendChild(h)},l=function(a){if(a.target._lazybgset){var b=a.target,d=b._lazybgset,e=b.currentSrc||b.src;e&&(d.style.backgroundImage="url("+(g.test(e)?JSON.stringify(e):e)+")"),b._lazybgsetLoading&&(c.fire(d,"_lazyloaded",{},!1,!0),delete b._lazybgsetLoading)}};addEventListener("lazybeforeunveil",function(a){var d,e,f;!a.defaultPrevented&&(d=a.target.getAttribute("data-bgset"))&&(f=a.target,e=b.createElement("img"),e.alt="",e._lazybgsetLoading=!0,a.detail.firesLoad=!0,k(d,f,e),setTimeout(function(){c.loader.unveil(e),c.rAF(function(){c.fire(e,"_lazyloaded",{},!0,!0),e.complete&&l({target:e})})}))}),b.addEventListener("load",l,!0),a.addEventListener("lazybeforesizes",function(a){if(a.detail.instance==c&&a.target._lazybgset&&a.detail.dataAttr){var b=a.target._lazybgset,d=j(b);h[d]&&(a.target._lazysizesParentFit=d,c.rAF(function(){a.target.setAttribute("data-parent-fit",d),a.target._lazysizesParentFit&&delete a.target._lazysizesParentFit}))}},!0),b.documentElement.addEventListener("lazybeforesizes",function(a){!a.defaultPrevented&&a.target._lazybgset&&a.detail.instance==c&&(a.detail.width=i(a.target._lazybgset))})}}); |
@@ -1,2 +0,2 @@ | ||
#lazysizes bgset extension - responsive background images | ||
# lazysizes bgset extension - responsive background images | ||
@@ -3,0 +3,0 @@ This simple and small plugin allows you to define multiple background images with a width descriptor, similar to how ``img[srcset]`` works as also art directed images using media queries, similar to how ``picture`` works. |
@@ -7,3 +7,18 @@ /* | ||
*/ | ||
(function(window){ | ||
(function(window, factory) { | ||
var globalInstall = function(){ | ||
factory(window.lazySizes); | ||
window.removeEventListener('lazyunveilread', globalInstall, true); | ||
}; | ||
factory = factory.bind(null, window, window.document); | ||
if(typeof module == 'object' && module.exports){ | ||
factory(require('lazysizes')); | ||
} else if(window.lazySizes) { | ||
globalInstall(); | ||
} else { | ||
window.addEventListener('lazyunveilread', globalInstall, true); | ||
} | ||
}(window, function(window, document, lazySizes) { | ||
/*jshint eqnull:true */ | ||
@@ -13,60 +28,48 @@ 'use strict'; | ||
var create = function(){ | ||
if(!window.lazySizes || window.lazySizes.getCustomMedias){return;} | ||
var lazySizes = window.lazySizes; | ||
lazySizes.getCustomMedias = (function(){ | ||
var regCleanPseudos = /['"]/g; | ||
var regSplit = /\s*\|\s*/g; | ||
var regNamedQueries = /^([a-z0-9_-]+)\s*:\s*(.+)$/i; | ||
lazySizes.getCustomMedias = (function(){ | ||
var regCleanPseudos = /['"]/g; | ||
var regSplit = /\s*\|\s*/g; | ||
var regNamedQueries = /^([a-z0-9_-]+)\s*:\s*(.+)$/i; | ||
var getStyle = function(elem, pseudo){ | ||
return ((getComputedStyle(elem, pseudo) || {getPropertyValue: function(){}}).getPropertyValue('content') || 'none').replace(regCleanPseudos, '').trim(); | ||
}; | ||
var parse = function(string, object){ | ||
string.split(regSplit).forEach(function(query){ | ||
if(query.match(regNamedQueries)){ | ||
object[RegExp.$1] = RegExp.$2; | ||
} | ||
}); | ||
}; | ||
return function(object, element){ | ||
object = object || lazySizes.cfg.customMedia; | ||
element = element || document.querySelector('html'); | ||
parse(getStyle(element, ':before'), object); | ||
parse(getStyle(element, ':after'), object); | ||
return object; | ||
}; | ||
})(); | ||
var getStyle = function(elem, pseudo){ | ||
return ((getComputedStyle(elem, pseudo) || {getPropertyValue: function(){}}).getPropertyValue('content') || 'none').replace(regCleanPseudos, '').trim(); | ||
}; | ||
var parse = function(string, object){ | ||
string.split(regSplit).forEach(function(query){ | ||
if(query.match(regNamedQueries)){ | ||
object[RegExp.$1] = RegExp.$2; | ||
} | ||
}); | ||
}; | ||
return function(object, element){ | ||
object = object || lazySizes.cfg.customMedia; | ||
element = element || document.querySelector('html'); | ||
parse(getStyle(element, ':before'), object); | ||
parse(getStyle(element, ':after'), object); | ||
return object; | ||
}; | ||
})(); | ||
lazySizes.updateCustomMedia = function(){ | ||
var i, len, customMedia; | ||
var elems = docElem.querySelectorAll('source[media][data-media][srcset]'); | ||
lazySizes.updateCustomMedia = function(){ | ||
var i, len, customMedia; | ||
var elems = docElem.querySelectorAll('source[media][data-media][srcset]'); | ||
lazySizes.getCustomMedias(); | ||
lazySizes.getCustomMedias(); | ||
for(i = 0, len = elems.length; i < len; i++){ | ||
if( (customMedia = lazySizes.cfg.customMedia[elems[i].getAttribute('data-media') || elems[i].getAttribute('media')]) ){ | ||
elems[i].setAttribute('media', customMedia); | ||
} | ||
for(i = 0, len = elems.length; i < len; i++){ | ||
if( (customMedia = lazySizes.cfg.customMedia[elems[i].getAttribute('data-media') || elems[i].getAttribute('media')]) ){ | ||
elems[i].setAttribute('media', customMedia); | ||
} | ||
} | ||
elems = docElem.querySelector('source[media][data-media][srcset] ~ img'); | ||
for(i = 0, len = elems.length; i < len; i++){ | ||
lazySizes.uP(elems[i]); | ||
} | ||
elems = docElem.querySelector('source[media][data-media][srcset] ~ img'); | ||
for(i = 0, len = elems.length; i < len; i++){ | ||
lazySizes.uP(elems[i]); | ||
} | ||
lazySizes.autoSizer.checkElems(); | ||
}; | ||
lazySizes.getCustomMedias(); | ||
docElem.removeEventListener('lazybeforeunveil', create); | ||
lazySizes.autoSizer.checkElems(); | ||
}; | ||
if(window.addEventListener){ | ||
docElem.addEventListener('lazybeforeunveil', create); | ||
create(); | ||
setTimeout(create); | ||
} | ||
lazySizes.getCustomMedias(); | ||
})(window); | ||
})); |
@@ -1,2 +0,2 @@ | ||
/*! lazysizes - v3.0.0 */ | ||
!function(a){"use strict";var b=document.documentElement,c=function(){if(a.lazySizes&&!a.lazySizes.getCustomMedias){var d=a.lazySizes;d.getCustomMedias=function(){var a=/['"]/g,b=/\s*\|\s*/g,c=/^([a-z0-9_-]+)\s*:\s*(.+)$/i,e=function(b,c){return((getComputedStyle(b,c)||{getPropertyValue:function(){}}).getPropertyValue("content")||"none").replace(a,"").trim()},f=function(a,d){a.split(b).forEach(function(a){a.match(c)&&(d[RegExp.$1]=RegExp.$2)})};return function(a,b){return a=a||d.cfg.customMedia,b=b||document.querySelector("html"),f(e(b,":before"),a),f(e(b,":after"),a),a}}(),d.updateCustomMedia=function(){var a,c,e,f=b.querySelectorAll("source[media][data-media][srcset]");for(d.getCustomMedias(),a=0,c=f.length;c>a;a++)(e=d.cfg.customMedia[f[a].getAttribute("data-media")||f[a].getAttribute("media")])&&f[a].setAttribute("media",e);for(f=b.querySelector("source[media][data-media][srcset] ~ img"),a=0,c=f.length;c>a;a++)d.uP(f[a]);d.autoSizer.checkElems()},d.getCustomMedias(),b.removeEventListener("lazybeforeunveil",c)}};a.addEventListener&&(b.addEventListener("lazybeforeunveil",c),c(),setTimeout(c))}(window); | ||
/*! lazysizes - v4.0.0-rc1 */ | ||
!function(a,b){var c=function(){b(a.lazySizes),a.removeEventListener("lazyunveilread",c,!0)};b=b.bind(null,a,a.document),"object"==typeof module&&module.exports?b(require("lazysizes")):a.lazySizes?c():a.addEventListener("lazyunveilread",c,!0)}(window,function(a,b,c){"use strict";var d=b.documentElement;c.getCustomMedias=function(){var a=/['"]/g,d=/\s*\|\s*/g,e=/^([a-z0-9_-]+)\s*:\s*(.+)$/i,f=function(b,c){return((getComputedStyle(b,c)||{getPropertyValue:function(){}}).getPropertyValue("content")||"none").replace(a,"").trim()},g=function(a,b){a.split(d).forEach(function(a){a.match(e)&&(b[RegExp.$1]=RegExp.$2)})};return function(a,d){return a=a||c.cfg.customMedia,d=d||b.querySelector("html"),g(f(d,":before"),a),g(f(d,":after"),a),a}}(),c.updateCustomMedia=function(){var a,b,e,f=d.querySelectorAll("source[media][data-media][srcset]");for(c.getCustomMedias(),a=0,b=f.length;b>a;a++)(e=c.cfg.customMedia[f[a].getAttribute("data-media")||f[a].getAttribute("media")])&&f[a].setAttribute("media",e);for(f=d.querySelector("source[media][data-media][srcset] ~ img"),a=0,b=f.length;b>a;a++)c.uP(f[a]);c.autoSizer.checkElems()},c.getCustomMedias()}); |
@@ -1,6 +0,6 @@ | ||
#lazysizes custommedia extension | ||
# lazysizes custommedia extension | ||
lazySizes custommedia extension allows you to automatically sync and manage your breakpoints between your CSS and the ``media`` attributes of your ``"picture > source"`` elements using the ``customMedia`` option of lazySizes. | ||
##Configuration via CSS | ||
## Configuration via CSS | ||
@@ -7,0 +7,0 @@ The following CSS... |
@@ -17,3 +17,18 @@ /** | ||
(function(document){ | ||
(function(window, factory) { | ||
var globalInstall = function(){ | ||
factory(window.lazySizes); | ||
window.removeEventListener('lazyunveilread', globalInstall, true); | ||
}; | ||
factory = factory.bind(null, window, window.document); | ||
if(typeof module == 'object' && module.exports){ | ||
factory(require('lazysizes')); | ||
} else if(window.lazySizes) { | ||
globalInstall(); | ||
} else { | ||
window.addEventListener('lazyunveilread', globalInstall, true); | ||
} | ||
}(window, function(window, document, lazySizes) { | ||
'use strict'; | ||
@@ -26,2 +41,4 @@ var regPicture; | ||
document.addEventListener('lazybeforeunveil', function(e){ | ||
if(e.detail.instance != lazySizes){return;} | ||
var elem, parent, srcset, sizes, isPicture; | ||
@@ -65,2 +82,2 @@ var picture, source; | ||
} | ||
})(document); | ||
})); |
@@ -1,2 +0,2 @@ | ||
/*! lazysizes - v3.0.0 */ | ||
!function(a){"use strict";var b,c=a.createElement("img");!("srcset"in c)||"sizes"in c||window.HTMLPictureElement||(b=/^picture$/i,a.addEventListener("lazybeforeunveil",function(c){var d,e,f,g,h,i,j;!c.defaultPrevented&&!lazySizesConfig.noIOSFix&&(d=c.target)&&(f=d.getAttribute(lazySizesConfig.srcsetAttr))&&(e=d.parentNode)&&((h=b.test(e.nodeName||""))||(g=d.getAttribute("sizes")||d.getAttribute(lazySizesConfig.sizesAttr)))&&(i=h?e:a.createElement("picture"),d._lazyImgSrc||Object.defineProperty(d,"_lazyImgSrc",{value:a.createElement("source"),writable:!0}),j=d._lazyImgSrc,g&&j.setAttribute("sizes",g),j.setAttribute(lazySizesConfig.srcsetAttr,f),d.setAttribute("data-pfsrcset",f),d.removeAttribute(lazySizesConfig.srcsetAttr),h||(e.insertBefore(i,d),i.appendChild(d)),i.insertBefore(j,d))}))}(document); | ||
/*! lazysizes - v4.0.0-rc1 */ | ||
!function(a,b){var c=function(){b(a.lazySizes),a.removeEventListener("lazyunveilread",c,!0)};b=b.bind(null,a,a.document),"object"==typeof module&&module.exports?b(require("lazysizes")):a.lazySizes?c():a.addEventListener("lazyunveilread",c,!0)}(window,function(a,b,c){"use strict";var d,e=b.createElement("img");!("srcset"in e)||"sizes"in e||a.HTMLPictureElement||(d=/^picture$/i,b.addEventListener("lazybeforeunveil",function(a){if(a.detail.instance==c){var e,f,g,h,i,j,k;!a.defaultPrevented&&!lazySizesConfig.noIOSFix&&(e=a.target)&&(g=e.getAttribute(lazySizesConfig.srcsetAttr))&&(f=e.parentNode)&&((i=d.test(f.nodeName||""))||(h=e.getAttribute("sizes")||e.getAttribute(lazySizesConfig.sizesAttr)))&&(j=i?f:b.createElement("picture"),e._lazyImgSrc||Object.defineProperty(e,"_lazyImgSrc",{value:b.createElement("source"),writable:!0}),k=e._lazyImgSrc,h&&k.setAttribute("sizes",h),k.setAttribute(lazySizesConfig.srcsetAttr,g),e.setAttribute("data-pfsrcset",g),e.removeAttribute(lazySizesConfig.srcsetAttr),i||(f.insertBefore(j,e),j.appendChild(e)),j.insertBefore(k,e))}}))}); |
@@ -5,3 +5,18 @@ /* | ||
(function(window, document){ | ||
(function(window, factory) { | ||
var globalInstall = function(){ | ||
factory(window.lazySizes); | ||
window.removeEventListener('lazyunveilread', globalInstall, true); | ||
}; | ||
factory = factory.bind(null, window, window.document); | ||
if(typeof module == 'object' && module.exports){ | ||
factory(require('lazysizes')); | ||
} else if(window.lazySizes) { | ||
globalInstall(); | ||
} else { | ||
window.addEventListener('lazyunveilread', globalInstall, true); | ||
} | ||
}(window, function(window, document, lazySizes) { | ||
/*jshint eqnull:true */ | ||
@@ -114,3 +129,3 @@ 'use strict'; | ||
config = (window.lazySizes && lazySizes.cfg) || window.lazySizesConfig; | ||
config = (lazySizes && lazySizes.cfg) || window.lazySizesConfig; | ||
@@ -425,7 +440,3 @@ if(!config){ | ||
if(detail.insert && detail.isSuccess && !event.defaultPrevented && detail.content != null && detail.content != elem.innerHTML){ | ||
if(window.jQuery){ | ||
jQuery(elem).html(detail.content); | ||
} else { | ||
elem.innerHTML = detail.content; | ||
} | ||
elem.innerHTML = detail.content; | ||
} | ||
@@ -497,3 +508,3 @@ | ||
function beforeUnveil(e){ | ||
if(e.defaultPrevented || !e.target.getAttribute('data-include')){return;} | ||
if(e.detail.instance != lazySizes || e.defaultPrevented || !e.target.getAttribute('data-include')){return;} | ||
queue.q(e.target); | ||
@@ -508,2 +519,2 @@ e.detail.firesLoad = true; | ||
})(window, document); | ||
})); |
@@ -1,2 +0,2 @@ | ||
/*! lazysizes - v3.0.0 */ | ||
!function(a,b){"use strict";function c(a){a.match(A)?this.urls[RegExp.$1]=u.map[RegExp.$2]||RegExp.$2:this.urls.include=u.map[a]||a}function d(a){var b,d,e;return a=a.trim(),a=u.map[a]||a,d=a.match(B),d?(e=RegExp.$1,b={condition:t.include.conditions[RegExp.$3]||t.customMedia[RegExp.$3]||RegExp.$2||null,name:RegExp.$3}):(e=a,b={condition:null,name:""}),b.urls={},(u.map[e]||e).split(z).forEach(c,b),!b.urls.include&&b.urls.amd&&(this.saved=!0,b.initial=this),b}function e(a){var b,c,e=a.getAttribute("data-include")||"",f=a.lazyInclude;return(!f||f.str!=e||u.allowReload)&&(c={saved:!1,content:null},f={str:e,candidates:(u.map[e]||e).split(x).map(d,c)},!(b=f.candidates.length)||f.candidates[b-1].condition?(c.saved=!0,f.candidates.push({urls:{},condition:null,name:"initial",content:c})):c.saved&&1==f.candidates.length&&(c.saved=!1),f.initialContent=c,c.saved&&(c.content=a.innerHTML),a.lazyInclude=f,f.candidates.length>1?lazySizes.aC(a,"lazyconditionalinclude"):lazySizes.rC(a,"lazyconditionalinclude")),f}function f(b,c){var d=!c.condition;return c.condition&&(g(),w[c.name]?d=!0:a.matchMedia&&"string"==typeof c.condition?d=(matchMedia(c.condition)||{}).matches:"function"==typeof c.condition&&(d=c.condition(b,c))),d}function g(){var a;w||(v||(v=b.querySelector(u.contentElement)),v?(a=(F(v,":after").getPropertyValue("content")||"none").replace(C,""),w={},a&&(w[a]=1),a=(F(v,":before").getPropertyValue("content")||"none").replace(C,""),a&&(w[a]=1)):w={})}function h(a){var b,c,d=a.lazyInclude;if(d&&d.candidates)for(b=0;b<d.candidates.length&&(c=d.candidates[b],!f(a,c));b++);return c&&c!=d.current||(c=null),c}function i(a,b){var c=new XMLHttpRequest;c.addEventListener("readystatechange",function(){var a=this.DONE||4;this.readyState===a&&(b(c),c=null)},!1),c.open.apply(c,a.openArgs),c.setRequestHeader("X-Requested-With","XMLHttpRequest"),a.xhrModifier&&a.xhrModifier(c,elem,candidate),c.send(a.sendData)}function j(a,b){a=a.split("|,|");var c=a.length-1;lazySizes.cfg.requireJs?lazySizes.cfg.requireJs(a,b):a.forEach(function(a,d){l(a,d==c?b:null)})}function k(a,b){lazySizes.cfg.systemJs?lazySizes.cfg.systemJs(a,b):l(a,b)}function l(a,c,d){if(!y[a]){var e=b.createElement(c===!0?"script":"link"),f=b.getElementsByTagName("script")[0];c?(e.src=a,e.async=!1):(e.rel="stylesheet",e.href=a),f.parentNode.insertBefore(e,f),y[a]=!0,y[e.href]=!0}}function m(a){a=a.split("|,|"),a.forEach(l)}function n(a){a&&"function"==typeof a.lazytransform&&a.lazytransform(this)}function o(a){a&&"function"==typeof a.lazyunload&&a.lazyunload(this)}function p(a){a&&"function"==typeof a.lazyload&&a.lazyload(this)}function q(b,c){var d,e,f,g=b.lazyInclude.current||null,h={candidate:c,openArgs:["GET",c.urls.include,!0],sendData:null,xhrModifier:null,content:c.content&&c.content.content||c.content,oldCandidate:g},l=lazySizes.fire(b,"lazyincludeload",h);return l.defaultPrevented?void G.d():(d=function(){var d,h=e.status,i=e.content||e.responseText,j=!(null!=i||!g||!g.urls.include),k={candidate:c,content:i,text:e.responseText||e.content,response:e.response,xml:e.responseXML,isSuccess:"status"in e?h>=200&&300>h||304===h:!0,oldCandidate:g,insert:!0,resetHTML:j},l={target:b,details:k,detail:k};c.modules=f,g&&g.modules&&(g.modules.forEach(o,l),g.modules=null,k.resetHTML&&null==k.content&&c.initial&&c.initial.saved&&(k.content=c.initial.content)),f.forEach(n,l),d=lazySizes.fire(b,"lazyincludeloaded",k),k.insert&&k.isSuccess&&!d.defaultPrevented&&null!=k.content&&k.content!=b.innerHTML&&(a.jQuery?jQuery(b).html(k.content):b.innerHTML=k.content),G.d(),f.forEach(p,l),setTimeout(function(){lazySizes.fire(b,"lazyincluded",k)}),e=null,f=null},b.lazyInclude.current=c,b.setAttribute("data-currentinclude",c.name),c.urls.css&&m(c.urls.css),null==h.content&&c.urls.include?i(h,function(a){e=a,f&&d()}):e=h,c.urls.amd||c.urls.module?(loadRequireImportCB=function(){f=Array.prototype.slice.call(arguments),e&&d()},c.urls.amd?j(c.urls.amd,loadRequireImportCB):k(c.urls.module,loadRequireImportCB)):f=[],void(e&&f&&d()))}function r(a){var b,c=e(a);return c.candidates.length&&D.contains(a)?(b=h(a),b&&q(a,b),!0):void 0}function s(a){!a.defaultPrevented&&a.target.getAttribute("data-include")&&(G.q(a.target),a.detail.firesLoad=!0)}if(b.getElementsByClassName){var t,u,v,w,x=/\s*,+\s+/,y={},z=/\s+/,A=/^(amd|css|module)\:(.+)/i,B=/(.+)\s+(\(\s*(.+)\s*\))/,C=/['"]/g,D=b.documentElement,E=b.getElementsByClassName("lazyconditionalinclude"),F=function(b,c){var d=b.ownerDocument.defaultView;return d.opener||(d=a),d.getComputedStyle(b,c||null)||{getPropertyValue:function(){},isNull:!0}},G=function(){var a=2,b=3,c=a,d=0,e=0,f=[],g=function(){var a,b=function(){f.length&&(d=0,f.d())};return function(){clearTimeout(a),a=setTimeout(b,999)}}();return{q:function(a){var h=null==a.getAttribute("data-lazyqueue");h&&(e++,c=b),d>c?f[h?"unshift":"push"](a):r(a)&&(d++,g())},d:function(){if(d&&d--,e>0&&(e--,e||(c=a)),!(d>c)){for(;f.length;)if(r(f.shift())){d++;break}g()}}}}(),H=function(){var a,b=function(){for(var a=0,b=E.length;b>a;a++)!lazySizes.hC(E[a],t.lazyClass)&&h(E[a])&&lazySizes.aC(E[a],t.lazyClass)};return function(c){clearTimeout(a),w=null,a=setTimeout(b,"resize"==c.type?31:0)}}();t=a.lazySizes&&lazySizes.cfg||a.lazySizesConfig,t||(t={},a.lazySizesConfig=t),t.include||(t.include={}),u=t.include,u.contentElement||(u.contentElement="html"),u.conditions||(u.conditions={}),u.map||(u.map={}),addEventListener("lazybeforeunveil",s,!1),addEventListener("resize",H,!1),addEventListener("lazyrefreshincludes",H,!1)}}(window,document); | ||
/*! lazysizes - v4.0.0-rc1 */ | ||
!function(a,b){var c=function(){b(a.lazySizes),a.removeEventListener("lazyunveilread",c,!0)};b=b.bind(null,a,a.document),"object"==typeof module&&module.exports?b(require("lazysizes")):a.lazySizes?c():a.addEventListener("lazyunveilread",c,!0)}(window,function(a,b,c){"use strict";function d(a){a.match(B)?this.urls[RegExp.$1]=v.map[RegExp.$2]||RegExp.$2:this.urls.include=v.map[a]||a}function e(a){var b,c,e;return a=a.trim(),a=v.map[a]||a,c=a.match(C),c?(e=RegExp.$1,b={condition:u.include.conditions[RegExp.$3]||u.customMedia[RegExp.$3]||RegExp.$2||null,name:RegExp.$3}):(e=a,b={condition:null,name:""}),b.urls={},(v.map[e]||e).split(A).forEach(d,b),!b.urls.include&&b.urls.amd&&(this.saved=!0,b.initial=this),b}function f(a){var b,d,f=a.getAttribute("data-include")||"",g=a.lazyInclude;return(!g||g.str!=f||v.allowReload)&&(d={saved:!1,content:null},g={str:f,candidates:(v.map[f]||f).split(y).map(e,d)},!(b=g.candidates.length)||g.candidates[b-1].condition?(d.saved=!0,g.candidates.push({urls:{},condition:null,name:"initial",content:d})):d.saved&&1==g.candidates.length&&(d.saved=!1),g.initialContent=d,d.saved&&(d.content=a.innerHTML),a.lazyInclude=g,g.candidates.length>1?c.aC(a,"lazyconditionalinclude"):c.rC(a,"lazyconditionalinclude")),g}function g(b,c){var d=!c.condition;return c.condition&&(h(),x[c.name]?d=!0:a.matchMedia&&"string"==typeof c.condition?d=(matchMedia(c.condition)||{}).matches:"function"==typeof c.condition&&(d=c.condition(b,c))),d}function h(){var a;x||(w||(w=b.querySelector(v.contentElement)),w?(a=(G(w,":after").getPropertyValue("content")||"none").replace(D,""),x={},a&&(x[a]=1),a=(G(w,":before").getPropertyValue("content")||"none").replace(D,""),a&&(x[a]=1)):x={})}function i(a){var b,c,d=a.lazyInclude;if(d&&d.candidates)for(b=0;b<d.candidates.length&&(c=d.candidates[b],!g(a,c));b++);return c&&c!=d.current||(c=null),c}function j(a,b){var c=new XMLHttpRequest;c.addEventListener("readystatechange",function(){var a=this.DONE||4;this.readyState===a&&(b(c),c=null)},!1),c.open.apply(c,a.openArgs),c.setRequestHeader("X-Requested-With","XMLHttpRequest"),a.xhrModifier&&a.xhrModifier(c,elem,candidate),c.send(a.sendData)}function k(a,b){a=a.split("|,|");var d=a.length-1;c.cfg.requireJs?c.cfg.requireJs(a,b):a.forEach(function(a,c){m(a,c==d?b:null)})}function l(a,b){c.cfg.systemJs?c.cfg.systemJs(a,b):m(a,b)}function m(a,c,d){if(!z[a]){var e=b.createElement(c===!0?"script":"link"),f=b.getElementsByTagName("script")[0];c?(e.src=a,e.async=!1):(e.rel="stylesheet",e.href=a),f.parentNode.insertBefore(e,f),z[a]=!0,z[e.href]=!0}}function n(a){a=a.split("|,|"),a.forEach(m)}function o(a){a&&"function"==typeof a.lazytransform&&a.lazytransform(this)}function p(a){a&&"function"==typeof a.lazyunload&&a.lazyunload(this)}function q(a){a&&"function"==typeof a.lazyload&&a.lazyload(this)}function r(a,b){var d,e,f,g=a.lazyInclude.current||null,h={candidate:b,openArgs:["GET",b.urls.include,!0],sendData:null,xhrModifier:null,content:b.content&&b.content.content||b.content,oldCandidate:g},i=c.fire(a,"lazyincludeload",h);return i.defaultPrevented?void H.d():(d=function(){var d,h=e.status,i=e.content||e.responseText,j=!(null!=i||!g||!g.urls.include),k={candidate:b,content:i,text:e.responseText||e.content,response:e.response,xml:e.responseXML,isSuccess:"status"in e?h>=200&&300>h||304===h:!0,oldCandidate:g,insert:!0,resetHTML:j},l={target:a,details:k,detail:k};b.modules=f,g&&g.modules&&(g.modules.forEach(p,l),g.modules=null,k.resetHTML&&null==k.content&&b.initial&&b.initial.saved&&(k.content=b.initial.content)),f.forEach(o,l),d=c.fire(a,"lazyincludeloaded",k),k.insert&&k.isSuccess&&!d.defaultPrevented&&null!=k.content&&k.content!=a.innerHTML&&(a.innerHTML=k.content),H.d(),f.forEach(q,l),setTimeout(function(){c.fire(a,"lazyincluded",k)}),e=null,f=null},a.lazyInclude.current=b,a.setAttribute("data-currentinclude",b.name),b.urls.css&&n(b.urls.css),null==h.content&&b.urls.include?j(h,function(a){e=a,f&&d()}):e=h,b.urls.amd||b.urls.module?(loadRequireImportCB=function(){f=Array.prototype.slice.call(arguments),e&&d()},b.urls.amd?k(b.urls.amd,loadRequireImportCB):l(b.urls.module,loadRequireImportCB)):f=[],void(e&&f&&d()))}function s(a){var b,c=f(a);return c.candidates.length&&E.contains(a)?(b=i(a),b&&r(a,b),!0):void 0}function t(a){a.detail.instance==c&&!a.defaultPrevented&&a.target.getAttribute("data-include")&&(H.q(a.target),a.detail.firesLoad=!0)}if(b.getElementsByClassName){var u,v,w,x,y=/\s*,+\s+/,z={},A=/\s+/,B=/^(amd|css|module)\:(.+)/i,C=/(.+)\s+(\(\s*(.+)\s*\))/,D=/['"]/g,E=b.documentElement,F=b.getElementsByClassName("lazyconditionalinclude"),G=function(b,c){var d=b.ownerDocument.defaultView;return d.opener||(d=a),d.getComputedStyle(b,c||null)||{getPropertyValue:function(){},isNull:!0}},H=function(){var a=2,b=3,c=a,d=0,e=0,f=[],g=function(){var a,b=function(){f.length&&(d=0,f.d())};return function(){clearTimeout(a),a=setTimeout(b,999)}}();return{q:function(a){var h=null==a.getAttribute("data-lazyqueue");h&&(e++,c=b),d>c?f[h?"unshift":"push"](a):s(a)&&(d++,g())},d:function(){if(d&&d--,e>0&&(e--,e||(c=a)),!(d>c)){for(;f.length;)if(s(f.shift())){d++;break}g()}}}}(),I=function(){var a,b=function(){for(var a=0,b=F.length;b>a;a++)!c.hC(F[a],u.lazyClass)&&i(F[a])&&c.aC(F[a],u.lazyClass)};return function(c){clearTimeout(a),x=null,a=setTimeout(b,"resize"==c.type?31:0)}}();u=c&&c.cfg||a.lazySizesConfig,u||(u={},a.lazySizesConfig=u),u.include||(u.include={}),v=u.include,v.contentElement||(v.contentElement="html"),v.conditions||(v.conditions={}),v.map||(v.map={}),addEventListener("lazybeforeunveil",t,!1),addEventListener("resize",I,!1),addEventListener("lazyrefreshincludes",I,!1)}}); |
@@ -1,2 +0,2 @@ | ||
#lazysizes include plugin | ||
# lazysizes include plugin | ||
@@ -14,3 +14,3 @@ **lazysizes** include extension/plugin asynchronously include non crucial content, styles or JS modules. Due to lazyloading, prioritized queuing and preload after load techniques lazySizes include extension scales much better than similar other solutions. | ||
##Basic usage | ||
## Basic usage | ||
@@ -34,3 +34,3 @@ Put a ``data-include`` attribute on your ``.lazyload`` element and reference the URL to load: | ||
###Condition configuration through CSS | ||
### Condition configuration through CSS | ||
@@ -64,3 +64,3 @@ The Lazysizes include extension checks wether the condition name matches the CSS ``content`` value the of ``:after`` or ``:before`` pseudo elements from the ``html`` element (can be configured). | ||
###Condition configuration through JS | ||
### Condition configuration through JS | ||
@@ -110,3 +110,3 @@ A condition can also be configured through the ``lazySizesConfig.include.conditions`` option map. Each key is either a string representing a media query or a function: | ||
###Loading Styles or (AMD) Modules | ||
### Loading Styles or (AMD) Modules | ||
@@ -134,3 +134,3 @@ The include feature can also load CSS, AMD or ES6 modules. To mark an URL as CSS put a ``css:``, to load an AMD module put a ``amd:`` or to load an ES6 module put a ``module:`` identifier in front of the URL: | ||
####AMD/ES6 module features | ||
#### AMD/ES6 module features | ||
@@ -213,3 +213,3 @@ While you can write your AMD/ES6 module how you want lazysizes include extension will check wether your module provides the following methods: | ||
####Loading multiple styles and modules | ||
#### Loading multiple styles and modules | ||
@@ -226,3 +226,3 @@ Multiple styles or AMD modules for one candidate can be configured by separating them with ``|,|`` signs: | ||
###Scalability and queue priority | ||
### Scalability and queue priority | ||
@@ -262,3 +262,3 @@ The include feature will always use a download queue to make sure, that multiple includes do not jam the browsers own request queue. In case of many non crucial includes mixed with some crucial includes on one page the ``data-lazyqueue`` attribute can be used to add a queue priority for the include extension: | ||
###Events | ||
### Events | ||
@@ -269,6 +269,6 @@ * ``lazyincludeload`` is a cancelable event fired at the element before the request is started. The ``event.detail`` object can be used to modify the XHR request. | ||
###Options | ||
### Options | ||
All include options are configurable through the ``lazySizesConfig.include`` option object: | ||
####``contentElement`` (default: ``"html"``): | ||
#### ``contentElement`` (default: ``"html"``): | ||
@@ -286,3 +286,3 @@ The selector of the element, which should be used to check for the CSS content value: | ||
####``conditions`` option (default: ``{}``): | ||
#### ``conditions`` option (default: ``{}``): | ||
The conditions option can be used to create new custom conditions. | ||
@@ -304,3 +304,3 @@ | ||
####``map`` option (default: ``{}``): | ||
#### ``map`` option (default: ``{}``): | ||
@@ -331,3 +331,3 @@ The ``map`` option allows to map the value of the ``data-include`` attribute to another string. This does not only work for the hole value, but also for parsed parts. | ||
##Reacting to user interaction | ||
## Reacting to user interaction | ||
@@ -381,3 +381,3 @@ Of course it is also possible to react to a user interaction. | ||
##Sharing States between two modules | ||
## Sharing States between two modules | ||
@@ -384,0 +384,0 @@ |
@@ -1,74 +0,87 @@ | ||
(function(){ | ||
(function(window, factory) { | ||
var globalInstall = function(){ | ||
factory(window.lazySizes); | ||
window.removeEventListener('lazyunveilread', globalInstall, true); | ||
}; | ||
factory = factory.bind(null, window, window.document); | ||
if(typeof module == 'object' && module.exports){ | ||
factory(require('lazysizes')); | ||
} else if(window.lazySizes) { | ||
globalInstall(); | ||
} else { | ||
window.addEventListener('lazyunveilread', globalInstall, true); | ||
} | ||
}(window, function(window, document, lazySizes) { | ||
/*jshint eqnull:true */ | ||
'use strict'; | ||
if(window.addEventListener){ | ||
var dummyParent = {nodeName: ''}; | ||
var supportPicture = !!window.HTMLPictureElement && ('sizes' in document.createElement('img')); | ||
var config = (window.lazySizes && lazySizes.cfg) || window.lazySizesConfig; | ||
var dummyParent = {nodeName: ''}; | ||
var supportPicture = !!window.HTMLPictureElement && ('sizes' in document.createElement('img')); | ||
var config = (window.lazySizes && lazySizes.cfg) || window.lazySizesConfig; | ||
var handleLoadingElements = function(e){ | ||
var i, isResponsive, hasTriggered, onload, loading; | ||
var handleLoadingElements = function(e){ | ||
var i, isResponsive, hasTriggered, onload, loading; | ||
var loadElements = e.target.querySelectorAll('img, iframe'); | ||
var loadElements = e.target.querySelectorAll('img, iframe'); | ||
for(i = 0; i < loadElements.length; i++){ | ||
isResponsive = loadElements[i].getAttribute('srcset') || (loadElements[i].parentNode || dummyParent).nodeName.toLowerCase() == 'picture'; | ||
for(i = 0; i < loadElements.length; i++){ | ||
isResponsive = loadElements[i].getAttribute('srcset') || (loadElements[i].parentNode || dummyParent).nodeName.toLowerCase() == 'picture'; | ||
if(!supportPicture && isResponsive){ | ||
lazySizes.uP(loadElements[i]); | ||
} | ||
if(!supportPicture && isResponsive){ | ||
lazySizes.uP(loadElements[i]); | ||
} | ||
if(!loadElements[i].complete && (isResponsive || loadElements[i].src)){ | ||
e.detail.firesLoad = true; | ||
if(!loadElements[i].complete && (isResponsive || loadElements[i].src)){ | ||
e.detail.firesLoad = true; | ||
if(!onload || !loading){ | ||
loading = 0; | ||
/*jshint loopfunc:true */ | ||
onload = function(evt){ | ||
loading--; | ||
if((!evt || loading < 1) && !hasTriggered){ | ||
hasTriggered = true; | ||
e.detail.firesLoad = false; | ||
lazySizes.fire(e.target, '_lazyloaded', {}, false, true); | ||
} | ||
if(!onload || !loading){ | ||
loading = 0; | ||
/*jshint loopfunc:true */ | ||
onload = function(evt){ | ||
loading--; | ||
if((!evt || loading < 1) && !hasTriggered){ | ||
hasTriggered = true; | ||
e.detail.firesLoad = false; | ||
lazySizes.fire(e.target, '_lazyloaded', {}, false, true); | ||
} | ||
if(evt && evt.target){ | ||
evt.target.removeEventListener('load', onload); | ||
evt.target.removeEventListener('error', onload); | ||
} | ||
}; | ||
if(evt && evt.target){ | ||
evt.target.removeEventListener('load', onload); | ||
evt.target.removeEventListener('error', onload); | ||
} | ||
}; | ||
setTimeout(onload, 3500); | ||
} | ||
setTimeout(onload, 3500); | ||
} | ||
loading++; | ||
loading++; | ||
loadElements[i].addEventListener('load', onload); | ||
loadElements[i].addEventListener('error', onload); | ||
} | ||
loadElements[i].addEventListener('load', onload); | ||
loadElements[i].addEventListener('error', onload); | ||
} | ||
}; | ||
if(!config){ | ||
config = {}; | ||
window.lazySizesConfig = config; | ||
} | ||
}; | ||
config.getNoscriptContent = function(noScript){ | ||
return noScript.textContent || noScript.innerText; | ||
}; | ||
if(!config){ | ||
config = {}; | ||
window.lazySizesConfig = config; | ||
} | ||
addEventListener('lazybeforeunveil', function(e){ | ||
if(e.defaultPrevented || e.target.getAttribute('data-noscript') == null){return;} | ||
config.getNoscriptContent = function(noScript){ | ||
return noScript.textContent || noScript.innerText; | ||
}; | ||
var noScript = e.target.querySelector('noscript, script[type*="html"]') || {}; | ||
var content = config.getNoscriptContent(noScript); | ||
window.addEventListener('lazybeforeunveil', function(e){ | ||
if(e.detail.instance != lazySizes || e.defaultPrevented || e.target.getAttribute('data-noscript') == null){return;} | ||
if(content){ | ||
e.target.innerHTML = content; | ||
handleLoadingElements(e); | ||
} | ||
}); | ||
} | ||
})(); | ||
var noScript = e.target.querySelector('noscript, script[type*="html"]') || {}; | ||
var content = config.getNoscriptContent(noScript); | ||
if(content){ | ||
e.target.innerHTML = content; | ||
handleLoadingElements(e); | ||
} | ||
}); | ||
})); |
@@ -1,2 +0,2 @@ | ||
/*! lazysizes - v3.0.0 */ | ||
!function(){"use strict";if(window.addEventListener){var a={nodeName:""},b=!!window.HTMLPictureElement&&"sizes"in document.createElement("img"),c=window.lazySizes&&lazySizes.cfg||window.lazySizesConfig,d=function(c){var d,e,f,g,h,i=c.target.querySelectorAll("img, iframe");for(d=0;d<i.length;d++)e=i[d].getAttribute("srcset")||"picture"==(i[d].parentNode||a).nodeName.toLowerCase(),!b&&e&&lazySizes.uP(i[d]),i[d].complete||!e&&!i[d].src||(c.detail.firesLoad=!0,g&&h||(h=0,g=function(a){h--,a&&!(1>h)||f||(f=!0,c.detail.firesLoad=!1,lazySizes.fire(c.target,"_lazyloaded",{},!1,!0)),a&&a.target&&(a.target.removeEventListener("load",g),a.target.removeEventListener("error",g))},setTimeout(g,3500)),h++,i[d].addEventListener("load",g),i[d].addEventListener("error",g))};c||(c={},window.lazySizesConfig=c),c.getNoscriptContent=function(a){return a.textContent||a.innerText},addEventListener("lazybeforeunveil",function(a){if(!a.defaultPrevented&&null!=a.target.getAttribute("data-noscript")){var b=a.target.querySelector('noscript, script[type*="html"]')||{},e=c.getNoscriptContent(b);e&&(a.target.innerHTML=e,d(a))}})}}(); | ||
/*! lazysizes - v4.0.0-rc1 */ | ||
!function(a,b){var c=function(){b(a.lazySizes),a.removeEventListener("lazyunveilread",c,!0)};b=b.bind(null,a,a.document),"object"==typeof module&&module.exports?b(require("lazysizes")):a.lazySizes?c():a.addEventListener("lazyunveilread",c,!0)}(window,function(a,b,c){"use strict";var d={nodeName:""},e=!!a.HTMLPictureElement&&"sizes"in b.createElement("img"),f=a.lazySizes&&c.cfg||a.lazySizesConfig,g=function(a){var b,f,g,h,i,j=a.target.querySelectorAll("img, iframe");for(b=0;b<j.length;b++)f=j[b].getAttribute("srcset")||"picture"==(j[b].parentNode||d).nodeName.toLowerCase(),!e&&f&&c.uP(j[b]),j[b].complete||!f&&!j[b].src||(a.detail.firesLoad=!0,h&&i||(i=0,h=function(b){i--,b&&!(1>i)||g||(g=!0,a.detail.firesLoad=!1,c.fire(a.target,"_lazyloaded",{},!1,!0)),b&&b.target&&(b.target.removeEventListener("load",h),b.target.removeEventListener("error",h))},setTimeout(h,3500)),i++,j[b].addEventListener("load",h),j[b].addEventListener("error",h))};f||(f={},a.lazySizesConfig=f),f.getNoscriptContent=function(a){return a.textContent||a.innerText},a.addEventListener("lazybeforeunveil",function(a){if(a.detail.instance==c&&!a.defaultPrevented&&null!=a.target.getAttribute("data-noscript")){var b=a.target.querySelector('noscript, script[type*="html"]')||{},d=f.getNoscriptContent(b);d&&(a.target.innerHTML=d,g(a))}})}); |
@@ -1,6 +0,6 @@ | ||
#lazysizes noscript/progressive enhancement extension | ||
# lazysizes noscript/progressive enhancement extension | ||
The noscript extension is the true ultimate progressive enhancement extension for lazySizes. It allows you to transform any HTML inside a ``noscript`` element as soon as it becomes visible. | ||
##Markup | ||
## Markup | ||
@@ -50,3 +50,3 @@ The ``lazyload`` class has to be added to the parent element of the ``noscript`` element and this element has to also have a ``data-noscript`` attribute. As soon as it is near the viewport the content of the ``noscript`` element will replace the content of the ``.lazyload` element. | ||
##Troubleshooting: Escaped HTML entities | ||
## Troubleshooting: Escaped HTML entities | ||
Normally the content of a ``noscript`` must be retrieved as text. But in some cases for example, if the ``noscript`` element was created in a XML documented/context, it must be retrieved as HTML. This can't be automatically detected. | ||
@@ -64,3 +64,3 @@ | ||
##<a name="ie8"></a>Add IE8- support with conditional comments | ||
## <a name="ie8"></a>Add IE8- support with conditional comments | ||
The noscript extension can also be used in conjunction with conditional comments to add progressive enhancement support for IE8-: | ||
@@ -67,0 +67,0 @@ |
@@ -1,2 +0,17 @@ | ||
(function(){ | ||
(function(window, factory) { | ||
var globalInstall = function(){ | ||
factory(window.lazySizes); | ||
window.removeEventListener('lazyunveilread', globalInstall, true); | ||
}; | ||
factory = factory.bind(null, window, window.document); | ||
if(typeof module == 'object' && module.exports){ | ||
factory(require('lazysizes')); | ||
} else if(window.lazySizes) { | ||
globalInstall(); | ||
} else { | ||
window.addEventListener('lazyunveilread', globalInstall, true); | ||
} | ||
}(window, function(window, document, lazySizes) { | ||
'use strict'; | ||
@@ -114,3 +129,5 @@ var style = document.createElement('a').style; | ||
if(!fitSupport || !positionSupport){ | ||
addEventListener('lazyunveilread', function(e){ | ||
window.addEventListener('lazyunveilread', function(e){ | ||
if(e.detail.instance != lazySizes){return;} | ||
var element = e.target; | ||
@@ -124,2 +141,2 @@ var obj = getObject(element); | ||
} | ||
})(); | ||
})); |
@@ -1,2 +0,2 @@ | ||
/*! lazysizes - v3.0.0 */ | ||
!function(){"use strict";function a(a){var b=getComputedStyle(a,null)||{},c=b.fontFamily||"",d=c.match(f)||"",e=d&&c.match(g)||"";return e&&(e=e[1]),{fit:d&&d[1]||"",position:j[e]||e||"center"}}function b(a,b){var c,d=lazySizes.cfg,e=a.cloneNode(!1),f=e.style,g=function(){var b=a.currentSrc||a.src;b&&(f.backgroundImage="url("+(i.test(b)?JSON.stringify(b):b)+")",c||(c=!0,lazySizes.rC(e,d.loadingClass),lazySizes.aC(e,d.loadedClass)))};a._lazysizesParentFit=b.fit,a.addEventListener("load",function(){lazySizes.rAF(g)},!0),e.addEventListener("load",function(){var a=e.currentSrc||e.src;a&&a!=h&&(e.src=h,e.srcset="")}),lazySizes.rAF(function(){var c=a,i=a.parentNode;"PICTURE"==i.nodeName.toUpperCase()&&(c=i,i=i.parentNode),lazySizes.rC(e,d.loadedClass),lazySizes.rC(e,d.lazyClass),lazySizes.aC(e,d.loadingClass),lazySizes.aC(e,d.objectFitClass||"lazysizes-display-clone"),e.getAttribute(d.srcsetAttr)&&e.setAttribute(d.srcsetAttr,""),e.getAttribute(d.srcAttr)&&e.setAttribute(d.srcAttr,""),e.src=h,e.srcset="",f.backgroundRepeat="no-repeat",f.backgroundPosition=b.position,f.backgroundSize=b.fit,c.style.display="none",a.setAttribute("data-parent-fit",b.fit),a.setAttribute("data-parent-container","prev"),i.insertBefore(e,c),a._lazysizesParentFit&&delete a._lazysizesParentFit,a.complete&&g()})}var c=document.createElement("a").style,d="objectFit"in c,e=d&&"objectPosition"in c,f=/object-fit["']*\s*:\s*["']*(contain|cover)/,g=/object-position["']*\s*:\s*["']*(.+?)(?=($|,|'|"|;))/,h="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==",i=/\(|\)|'/,j={center:"center","50% 50%":"center"};d&&e||addEventListener("lazyunveilread",function(c){var e=c.target,f=a(e);!f.fit||d&&"center"==f.position||b(e,f)},!0)}(); | ||
/*! lazysizes - v4.0.0-rc1 */ | ||
!function(a,b){var c=function(){b(a.lazySizes),a.removeEventListener("lazyunveilread",c,!0)};b=b.bind(null,a,a.document),"object"==typeof module&&module.exports?b(require("lazysizes")):a.lazySizes?c():a.addEventListener("lazyunveilread",c,!0)}(window,function(a,b,c){"use strict";function d(a){var b=getComputedStyle(a,null)||{},c=b.fontFamily||"",d=c.match(i)||"",e=d&&c.match(j)||"";return e&&(e=e[1]),{fit:d&&d[1]||"",position:m[e]||e||"center"}}function e(a,b){var d,e=c.cfg,f=a.cloneNode(!1),g=f.style,h=function(){var b=a.currentSrc||a.src;b&&(g.backgroundImage="url("+(l.test(b)?JSON.stringify(b):b)+")",d||(d=!0,c.rC(f,e.loadingClass),c.aC(f,e.loadedClass)))};a._lazysizesParentFit=b.fit,a.addEventListener("load",function(){c.rAF(h)},!0),f.addEventListener("load",function(){var a=f.currentSrc||f.src;a&&a!=k&&(f.src=k,f.srcset="")}),c.rAF(function(){var d=a,i=a.parentNode;"PICTURE"==i.nodeName.toUpperCase()&&(d=i,i=i.parentNode),c.rC(f,e.loadedClass),c.rC(f,e.lazyClass),c.aC(f,e.loadingClass),c.aC(f,e.objectFitClass||"lazysizes-display-clone"),f.getAttribute(e.srcsetAttr)&&f.setAttribute(e.srcsetAttr,""),f.getAttribute(e.srcAttr)&&f.setAttribute(e.srcAttr,""),f.src=k,f.srcset="",g.backgroundRepeat="no-repeat",g.backgroundPosition=b.position,g.backgroundSize=b.fit,d.style.display="none",a.setAttribute("data-parent-fit",b.fit),a.setAttribute("data-parent-container","prev"),i.insertBefore(f,d),a._lazysizesParentFit&&delete a._lazysizesParentFit,a.complete&&h()})}var f=b.createElement("a").style,g="objectFit"in f,h=g&&"objectPosition"in f,i=/object-fit["']*\s*:\s*["']*(contain|cover)/,j=/object-position["']*\s*:\s*["']*(.+?)(?=($|,|'|"|;))/,k="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==",l=/\(|\)|'/,m={center:"center","50% 50%":"center"};g&&h||a.addEventListener("lazyunveilread",function(a){if(a.detail.instance==c){var b=a.target,f=d(b);!f.fit||g&&"center"==f.position||e(b,f)}},!0)}); |
@@ -1,8 +0,8 @@ | ||
#lazySizes object fit extension | ||
# lazySizes object fit extension | ||
This extension polyfills `object-fit`: `cover` and `contain` properties as also the `object-position` in non supporting browsers. Here you find a [simple demo](https://jsfiddle.net/trixta/x2p17f31/). | ||
##Usage | ||
## Usage | ||
###Include JS files: | ||
### Include JS files: | ||
Include lazysizes and lazysizes object fit and optionally lazysizes parent-fit and lazysizes respimg plugin. Lazysizes object-fit and respimg plugin are only needed in browser that don't support object fit or responsive images. Lazysizes parent-fit is recommended if you use object fit responsive images in combination with `data-sizes="auto"`. | ||
@@ -21,3 +21,3 @@ | ||
###Add markup | ||
### Add markup | ||
The object-fit plugin is not a full polyfill. | ||
@@ -43,3 +43,3 @@ | ||
###CSS | ||
### CSS | ||
@@ -46,0 +46,0 @@ To init the plugin on an image simply use the `font-family` property directly on your image. |
@@ -18,3 +18,18 @@ /* | ||
(function(window, document, undefined){ | ||
(function(window, factory) { | ||
var globalInstall = function(){ | ||
factory(window.lazySizes); | ||
window.removeEventListener('lazyunveilread', globalInstall, true); | ||
}; | ||
factory = factory.bind(null, window, window.document); | ||
if(typeof module == 'object' && module.exports){ | ||
factory(require('lazysizes')); | ||
} else if(window.lazySizes) { | ||
globalInstall(); | ||
} else { | ||
window.addEventListener('lazyunveilread', globalInstall, true); | ||
} | ||
}(window, function(window, document, lazySizes) { | ||
/*jshint eqnull:true */ | ||
@@ -196,3 +211,3 @@ 'use strict'; | ||
var extentLazySizes = function(){ | ||
if(window.lazySizes && !window.lazySizes.getOptimumX){ | ||
if(lazySizes && !lazySizes.getOptimumX){ | ||
lazySizes.getX = getOptimumX; | ||
@@ -207,3 +222,3 @@ lazySizes.pWS = parseWsrcset; | ||
config = (window.lazySizes && lazySizes.cfg) || window.lazySizesConfig; | ||
config = (lazySizes && lazySizes.cfg) || window.lazySizesConfig; | ||
@@ -232,2 +247,4 @@ if(!config){ | ||
addEventListener('lazybeforesizes', function(e){ | ||
if(e.detail.instance != lazySizes){return;} | ||
var optimumx, lazyData, width, attr; | ||
@@ -260,2 +277,2 @@ | ||
})(window, document); | ||
})); |
@@ -1,2 +0,2 @@ | ||
/*! lazysizes - v3.0.0 */ | ||
!function(a,b,c){"use strict";if(a.addEventListener){var d,e=/^picture$/i,f=b.documentElement,g=function(){var a,b=/(([^,\s].[^\s]+)\s+(\d+)(w|h)(\s+(\d+)(w|h))?)/g,c=function(b,c,d,e,f,g,h,i){a.push({c:c,u:d,w:1*("w"==i?h:e)})};return function(d){return a=[],d.replace(b,c),a}}(),h=function(){var a=function(a,b){return a.w-b.w},b=function(b,c){var d={srcset:b.getAttribute(lazySizes.cfg.srcsetAttr)||""},e=g(d.srcset);return Object.defineProperty(b,c,{value:d,writable:!0}),d.cands=e,d.index=0,d.dirty=!1,e[0]&&e[0].w?(e.sort(a),d.cSrcset=[e[d.index].c]):(d.cSrcset=d.srcset?[d.srcset]:[],d.cands=[]),d};return function(a,c){var d,f,g,h;if(!a[c]&&(h=a.parentNode||{},a[c]=b(a,c),a[c].isImg=!0,e.test(h.nodeName||"")))for(a[c].picture=!0,d=h.getElementsByTagName("source"),f=0,g=d.length;g>f;f++)b(d[f],c).isImg=!1;return a[c]}}(),i={_lazyOptimumx:function(){var a=function(a,b,c){var d,e,f;return a&&a.d?(f=c>.7?.6:.4,a.d>=c?!1:(e=Math.pow(a.d-f,1.6)||.1,.1>e?e=.1:e>3&&(e=3),d=a.d+(b-c)*e,c>d)):!0};return function(b,c,d){var e,f;for(e=0;e<b.cands.length;e++)if(f=b.cands[e],f.d=(f.w||1)/c,!(b.index>=e)){if(!(f.d<=d||a(b.cands[e-1],f.d,d)))break;b.cSrcset.push(f.c),b.index=e}}}()},j=function(){var a=function(a,b,c,d,e){var f,g=a[e];g&&(f=g.index,i[e](g,b,c),g.dirty&&f==g.index||(g.cSrcset.join(", "),a.setAttribute(d,g.cSrcset.join(", ")),g.dirty=!0))};return function(b,c,d,e,f){var g,h,i,j,k=b[f];if(k.width=c,k.picture&&(h=b.parentNode))for(g=h.getElementsByTagName("source"),j=0,i=g.length;i>j;j++)a(g[j],c,d,e,f);a(b,c,d,e,f)}}(),k=function(a){var b=a.getAttribute("data-optimumx")||a.getAttribute("data-maxdpr");return!b&&d.constrainPixelDensity&&(b="auto"),b&&(b="auto"==b?d.getOptimumX(a):parseFloat(b,10)),b},l=function(){a.lazySizes&&!a.lazySizes.getOptimumX&&(lazySizes.getX=k,lazySizes.pWS=g,f.removeEventListener("lazybeforeunveil",l))};f.addEventListener("lazybeforeunveil",l),setTimeout(l),d=a.lazySizes&&lazySizes.cfg||a.lazySizesConfig,d||(d={},a.lazySizesConfig=d),"function"!=typeof d.getOptimumX&&(d.getOptimumX=function(){var b=a.devicePixelRatio||1;return b>2.6?b*=.6:b>1.9?b*=.8:b-=.01,Math.min(Math.round(100*b)/100,2)}),a.devicePixelRatio&&addEventListener("lazybeforesizes",function(a){var b,c,e,f,g=a.target,i=a.detail,l=i.dataAttr;a.defaultPrevented||!(b=k(g))||b>=devicePixelRatio||(!l||!g._lazyOptimumx||i.reloaded||d.unloadedClass&&lazySizes.hC(g,d.unloadedClass)||(g._lazyOptimumx=null),c=h(g,"_lazyOptimumx"),e=i.width,e&&(c.width||0)<e&&(f=l?lazySizes.cfg.srcsetAttr:"srcset",lazySizes.rAF(function(){j(g,e,b,f,"_lazyOptimumx")})))})}}(window,document); | ||
/*! lazysizes - v4.0.0-rc1 */ | ||
!function(a,b){var c=function(){b(a.lazySizes),a.removeEventListener("lazyunveilread",c,!0)};b=b.bind(null,a,a.document),"object"==typeof module&&module.exports?b(require("lazysizes")):a.lazySizes?c():a.addEventListener("lazyunveilread",c,!0)}(window,function(a,b,c){"use strict";if(a.addEventListener){var d,e=/^picture$/i,f=b.documentElement,g=function(){var a,b=/(([^,\s].[^\s]+)\s+(\d+)(w|h)(\s+(\d+)(w|h))?)/g,c=function(b,c,d,e,f,g,h,i){a.push({c:c,u:d,w:1*("w"==i?h:e)})};return function(d){return a=[],d.replace(b,c),a}}(),h=function(){var a=function(a,b){return a.w-b.w},b=function(b,d){var e={srcset:b.getAttribute(c.cfg.srcsetAttr)||""},f=g(e.srcset);return Object.defineProperty(b,d,{value:e,writable:!0}),e.cands=f,e.index=0,e.dirty=!1,f[0]&&f[0].w?(f.sort(a),e.cSrcset=[f[e.index].c]):(e.cSrcset=e.srcset?[e.srcset]:[],e.cands=[]),e};return function(a,c){var d,f,g,h;if(!a[c]&&(h=a.parentNode||{},a[c]=b(a,c),a[c].isImg=!0,e.test(h.nodeName||"")))for(a[c].picture=!0,d=h.getElementsByTagName("source"),f=0,g=d.length;g>f;f++)b(d[f],c).isImg=!1;return a[c]}}(),i={_lazyOptimumx:function(){var a=function(a,b,c){var d,e,f;return a&&a.d?(f=c>.7?.6:.4,a.d>=c?!1:(e=Math.pow(a.d-f,1.6)||.1,.1>e?e=.1:e>3&&(e=3),d=a.d+(b-c)*e,c>d)):!0};return function(b,c,d){var e,f;for(e=0;e<b.cands.length;e++)if(f=b.cands[e],f.d=(f.w||1)/c,!(b.index>=e)){if(!(f.d<=d||a(b.cands[e-1],f.d,d)))break;b.cSrcset.push(f.c),b.index=e}}}()},j=function(){var a=function(a,b,c,d,e){var f,g=a[e];g&&(f=g.index,i[e](g,b,c),g.dirty&&f==g.index||(g.cSrcset.join(", "),a.setAttribute(d,g.cSrcset.join(", ")),g.dirty=!0))};return function(b,c,d,e,f){var g,h,i,j,k=b[f];if(k.width=c,k.picture&&(h=b.parentNode))for(g=h.getElementsByTagName("source"),j=0,i=g.length;i>j;j++)a(g[j],c,d,e,f);a(b,c,d,e,f)}}(),k=function(a){var b=a.getAttribute("data-optimumx")||a.getAttribute("data-maxdpr");return!b&&d.constrainPixelDensity&&(b="auto"),b&&(b="auto"==b?d.getOptimumX(a):parseFloat(b,10)),b},l=function(){c&&!c.getOptimumX&&(c.getX=k,c.pWS=g,f.removeEventListener("lazybeforeunveil",l))};f.addEventListener("lazybeforeunveil",l),setTimeout(l),d=c&&c.cfg||a.lazySizesConfig,d||(d={},a.lazySizesConfig=d),"function"!=typeof d.getOptimumX&&(d.getOptimumX=function(){var b=a.devicePixelRatio||1;return b>2.6?b*=.6:b>1.9?b*=.8:b-=.01,Math.min(Math.round(100*b)/100,2)}),a.devicePixelRatio&&addEventListener("lazybeforesizes",function(a){if(a.detail.instance==c){var b,e,f,g,i=a.target,l=a.detail,m=l.dataAttr;a.defaultPrevented||!(b=k(i))||b>=devicePixelRatio||(!m||!i._lazyOptimumx||l.reloaded||d.unloadedClass&&c.hC(i,d.unloadedClass)||(i._lazyOptimumx=null),e=h(i,"_lazyOptimumx"),f=l.width,f&&(e.width||0)<f&&(g=m?c.cfg.srcsetAttr:"srcset",c.rAF(function(){j(i,f,b,g,"_lazyOptimumx")})))}})}}); |
@@ -1,2 +0,2 @@ | ||
#lazysizes optimumx plugin | ||
# lazysizes optimumx plugin | ||
@@ -24,3 +24,3 @@ **lazysizes** optimumx plugin helps you to limit/constrain the maximum resolution in case the **w descriptor** is used. Simply add the attribute ``data-optimumx="1.6"`` to constrain the max resolution to 1.6. | ||
##Usage | ||
## Usage | ||
@@ -80,3 +80,3 @@ ```html | ||
###The ``getOptimumX`` option callback | ||
### The ``getOptimumX`` option callback | ||
@@ -122,3 +122,3 @@ Normally the image specific optimal pixel density should be added as a floating point number using the ``data-optimumx`` attribute. Additionally it is also possible to add the ``"auto"`` keyword as a value of the ``data-optimumx`` attribute. In that case the ``getOptimumX`` option callback is invoked with the element as the first argument. | ||
##<a name="compressive-picture-pattern"></a>Background information: Compressive picture pattern | ||
## <a name="compressive-picture-pattern"></a>Background information: Compressive picture pattern | ||
@@ -179,3 +179,3 @@ From a perceived performance vs. perceived quality standpoint the best way to deal with High DPI images is to serve higher compressed candidates to clients with high resolution displays. | ||
##<a name="lying-sizes"></a>Background information: Lying sizes attribute | ||
## <a name="lying-sizes"></a>Background information: Lying sizes attribute | ||
@@ -182,0 +182,0 @@ There is also another much more lightweight way to get a similar effect. Instead of parsing and constraining the ``srcset`` to meet the ``data-optimumx`` constraint, there is also the possibility to modify the ``sizes`` attribute instead. |
@@ -1,2 +0,17 @@ | ||
(function(window, document){ | ||
(function(window, factory) { | ||
var globalInstall = function(){ | ||
factory(window.lazySizes); | ||
window.removeEventListener('lazyunveilread', globalInstall, true); | ||
}; | ||
factory = factory.bind(null, window, window.document); | ||
if(typeof module == 'object' && module.exports){ | ||
factory(require('lazysizes')); | ||
} else if(window.lazySizes) { | ||
globalInstall(); | ||
} else { | ||
window.addEventListener('lazyunveilread', globalInstall, true); | ||
} | ||
}(window, function(window, document, lazySizes) { | ||
'use strict'; | ||
@@ -82,3 +97,3 @@ | ||
srcset = element.getAttribute(lazySizesConfig.srcsetAttr) || element.getAttribute('srcset') || element.getAttribute('data-pfsrcset') || element.getAttribute('data-risrcset') || ''; | ||
media = element.getAttribute('media'); | ||
media = element._lsMedia || element.getAttribute('media'); | ||
media = lazySizesConfig.customMedia[element.getAttribute('data-media') || media] || media; | ||
@@ -135,21 +150,10 @@ | ||
var extend = function(){ | ||
if(window.lazySizes){ | ||
if(!lazySizes.parentFit){ | ||
lazySizes.parentFit = parentFit; | ||
} | ||
window.removeEventListener('lazyunveilread', extend, true); | ||
} | ||
}; | ||
lazySizes.parentFit = parentFit; | ||
window.addEventListener('lazyunveilread', extend, true); | ||
document.addEventListener('lazybeforesizes', function(e){ | ||
if(e.defaultPrevented || e.detail.instance != lazySizes){return;} | ||
document.addEventListener('lazybeforesizes', function(e){ | ||
if(e.defaultPrevented){return;} | ||
var element = e.target; | ||
e.detail.width = parentFit.calculateSize(element, e.detail.width); | ||
}); | ||
setTimeout(extend); | ||
})(window, document); | ||
})); |
@@ -1,2 +0,2 @@ | ||
/*! lazysizes - v3.0.0 */ | ||
!function(a,b){"use strict";if(a.addEventListener){var c=/\s+(\d+)(w|h)\s+(\d+)(w|h)/,d=/parent-fit["']*\s*:\s*["']*(contain|cover|width)/,e=/parent-container["']*\s*:\s*["']*(.+?)(?=(\s|$|,|'|"|;))/,f=/^picture$/i,g=function(a){return getComputedStyle(a,null)||{}},h={getParent:function(b,c){var d=b,e=b.parentNode;return c&&"prev"!=c||!e||!f.test(e.nodeName||"")||(e=e.parentNode),"self"!=c&&(d="prev"==c?b.previousElementSibling:c&&(e.closest||a.jQuery)?(e.closest?e.closest(c):jQuery(e).closest(c)[0])||e:e),d},getFit:function(a){var b,c,f=g(a),i=f.content||f.fontFamily,j={fit:a._lazysizesParentFit||a.getAttribute("data-parent-fit")};return!j.fit&&i&&(b=i.match(d))&&(j.fit=b[1]),j.fit?(c=a._lazysizesParentContainer||a.getAttribute("data-parent-container"),!c&&i&&(b=i.match(e))&&(c=b[1]),j.parent=h.getParent(a,c)):j.fit=f.objectFit,j},getImageRatio:function(b){var d,e,g,h,i=b.parentNode,j=i&&f.test(i.nodeName||"")?i.querySelectorAll("source, img"):[b];for(d=0;d<j.length;d++)if(b=j[d],e=b.getAttribute(lazySizesConfig.srcsetAttr)||b.getAttribute("srcset")||b.getAttribute("data-pfsrcset")||b.getAttribute("data-risrcset")||"",g=b.getAttribute("media"),g=lazySizesConfig.customMedia[b.getAttribute("data-media")||g]||g,e&&(!g||(a.matchMedia&&matchMedia(g)||{}).matches)){h=parseFloat(b.getAttribute("data-aspectratio")),!h&&e.match(c)&&(h="w"==RegExp.$2?RegExp.$1/RegExp.$3:RegExp.$3/RegExp.$1);break}return h},calculateSize:function(a,b){var c,d,e,f,g=this.getFit(a),h=g.fit,i=g.parent;return"width"==h||("contain"==h||"cover"==h)&&(e=this.getImageRatio(a))?(i?b=i.clientWidth:i=a,f=b,"width"==h?f=b:(d=i.clientHeight,d>40&&(c=b/d)&&("cover"==h&&e>c||"contain"==h&&c>e)&&(f=b*(e/c))),f):b}},i=function(){a.lazySizes&&(lazySizes.parentFit||(lazySizes.parentFit=h),a.removeEventListener("lazyunveilread",i,!0))};a.addEventListener("lazyunveilread",i,!0),b.addEventListener("lazybeforesizes",function(a){if(!a.defaultPrevented){var b=a.target;a.detail.width=h.calculateSize(b,a.detail.width)}}),setTimeout(i)}}(window,document); | ||
/*! lazysizes - v4.0.0-rc1 */ | ||
!function(a,b){var c=function(){b(a.lazySizes),a.removeEventListener("lazyunveilread",c,!0)};b=b.bind(null,a,a.document),"object"==typeof module&&module.exports?b(require("lazysizes")):a.lazySizes?c():a.addEventListener("lazyunveilread",c,!0)}(window,function(a,b,c){"use strict";if(a.addEventListener){var d=/\s+(\d+)(w|h)\s+(\d+)(w|h)/,e=/parent-fit["']*\s*:\s*["']*(contain|cover|width)/,f=/parent-container["']*\s*:\s*["']*(.+?)(?=(\s|$|,|'|"|;))/,g=/^picture$/i,h=function(a){return getComputedStyle(a,null)||{}},i={getParent:function(b,c){var d=b,e=b.parentNode;return c&&"prev"!=c||!e||!g.test(e.nodeName||"")||(e=e.parentNode),"self"!=c&&(d="prev"==c?b.previousElementSibling:c&&(e.closest||a.jQuery)?(e.closest?e.closest(c):jQuery(e).closest(c)[0])||e:e),d},getFit:function(a){var b,c,d=h(a),g=d.content||d.fontFamily,j={fit:a._lazysizesParentFit||a.getAttribute("data-parent-fit")};return!j.fit&&g&&(b=g.match(e))&&(j.fit=b[1]),j.fit?(c=a._lazysizesParentContainer||a.getAttribute("data-parent-container"),!c&&g&&(b=g.match(f))&&(c=b[1]),j.parent=i.getParent(a,c)):j.fit=d.objectFit,j},getImageRatio:function(b){var c,e,f,h,i=b.parentNode,j=i&&g.test(i.nodeName||"")?i.querySelectorAll("source, img"):[b];for(c=0;c<j.length;c++)if(b=j[c],e=b.getAttribute(lazySizesConfig.srcsetAttr)||b.getAttribute("srcset")||b.getAttribute("data-pfsrcset")||b.getAttribute("data-risrcset")||"",f=b._lsMedia||b.getAttribute("media"),f=lazySizesConfig.customMedia[b.getAttribute("data-media")||f]||f,e&&(!f||(a.matchMedia&&matchMedia(f)||{}).matches)){h=parseFloat(b.getAttribute("data-aspectratio")),!h&&e.match(d)&&(h="w"==RegExp.$2?RegExp.$1/RegExp.$3:RegExp.$3/RegExp.$1);break}return h},calculateSize:function(a,b){var c,d,e,f,g=this.getFit(a),h=g.fit,i=g.parent;return"width"==h||("contain"==h||"cover"==h)&&(e=this.getImageRatio(a))?(i?b=i.clientWidth:i=a,f=b,"width"==h?f=b:(d=i.clientHeight,d>40&&(c=b/d)&&("cover"==h&&e>c||"contain"==h&&c>e)&&(f=b*(e/c))),f):b}};c.parentFit=i,b.addEventListener("lazybeforesizes",function(a){if(!a.defaultPrevented&&a.detail.instance==c){var b=a.target;a.detail.width=i.calculateSize(b,a.detail.width)}})}}); |
@@ -1,10 +0,10 @@ | ||
#lazySizes parent fit extension | ||
# lazySizes parent fit extension | ||
The parent fit plugin extends the ``data-sizes="auto"`` feature to also calculate the right ``sizes`` for ``object-fit: contain|cover`` image elements as also **height** ( and width) constrained image elements in general. | ||
##Usage | ||
## Usage | ||
For this to work properly the physical aspect-ratio of the image candidates need to be calculable. To do so at least one of the image candidates inside the ``srcset`` attribute also need to include a **h** (height) descriptor for at least one image candidate in each `srcset`. | ||
###object-fit: contain|cover usage | ||
### object-fit: contain|cover usage | ||
@@ -29,3 +29,3 @@ Simply include this plugin, combine your width descriptors with height descriptors and use ``object-fit``. | ||
###[data-parent-fit="contain|cover|width"] usage | ||
### [data-parent-fit="contain|cover|width"] usage | ||
@@ -50,3 +50,3 @@ Due to the fact, that object-fit isn't supported in IE11. This plugin also supports calculating height and width constrained images based on the parent element. | ||
###[data-parent-container="html|.my-image-container"] | ||
### [data-parent-container="html|.my-image-container"] | ||
Normally the next closest parent that is not a `picture` element is used as the parent (i.e.: `:not(picture)`). This can be changed using the `data-parent-container` option. It takes any simple selector. If you want to use the viewport as the parent simply add `html`. | ||
@@ -56,3 +56,3 @@ | ||
###Controlling `data-parent-fit` and `data-parent-container` with CSS | ||
### Controlling `data-parent-fit` and `data-parent-container` with CSS | ||
These option can also be set via CSS by abusing the `font-family` property. | ||
@@ -59,0 +59,0 @@ |
@@ -5,3 +5,18 @@ /* | ||
*/ | ||
(function(window){ | ||
(function(window, factory) { | ||
var globalInstall = function(){ | ||
factory(window.lazySizes); | ||
window.removeEventListener('lazyunveilread', globalInstall, true); | ||
}; | ||
factory = factory.bind(null, window, window.document); | ||
if(typeof module == 'object' && module.exports){ | ||
factory(require('lazysizes')); | ||
} else if(window.lazySizes) { | ||
globalInstall(); | ||
} else { | ||
window.addEventListener('lazyunveilread', globalInstall, true); | ||
} | ||
}(window, function(window, document, lazySizes) { | ||
/*jshint eqnull:true */ | ||
@@ -12,3 +27,3 @@ 'use strict'; | ||
if(window.addEventListener){ | ||
config = (window.lazySizes && lazySizes.cfg) || window.lazySizesConfig || {}; | ||
config = (lazySizes && lazySizes.cfg) || window.lazySizesConfig || {}; | ||
elements = config.lazyClass || 'lazyload'; | ||
@@ -21,3 +36,3 @@ onprint = function(){ | ||
if(window.lazySizes){ | ||
if(lazySizes){ | ||
for(i = 0, len = elements.length; i < len; i++){ | ||
@@ -39,2 +54,2 @@ lazySizes.loader.unveil(elements[i]); | ||
} | ||
})(window); | ||
})); |
@@ -1,2 +0,2 @@ | ||
/*! lazysizes - v3.0.0 */ | ||
!function(a){"use strict";var b,c,d,e;a.addEventListener&&(b=a.lazySizes&&lazySizes.cfg||a.lazySizesConfig||{},c=b.lazyClass||"lazyload",d=function(){var b,d;if("string"==typeof c&&(c=document.getElementsByClassName(c)),a.lazySizes)for(b=0,d=c.length;d>b;b++)lazySizes.loader.unveil(c[b])},addEventListener("beforeprint",d,!1),!("onbeforeprint"in a)&&a.matchMedia&&(e=matchMedia("print"))&&e.addListener&&e.addListener(function(){e.matches&&d()}))}(window); | ||
/*! lazysizes - v4.0.0-rc1 */ | ||
!function(a,b){var c=function(){b(a.lazySizes),a.removeEventListener("lazyunveilread",c,!0)};b=b.bind(null,a,a.document),"object"==typeof module&&module.exports?b(require("lazysizes")):a.lazySizes?c():a.addEventListener("lazyunveilread",c,!0)}(window,function(a,b,c){"use strict";var d,e,f,g;a.addEventListener&&(d=c&&c.cfg||a.lazySizesConfig||{},e=d.lazyClass||"lazyload",f=function(){var a,d;if("string"==typeof e&&(e=b.getElementsByClassName(e)),c)for(a=0,d=e.length;d>a;a++)c.loader.unveil(e[a])},addEventListener("beforeprint",f,!1),!("onbeforeprint"in a)&&a.matchMedia&&(g=matchMedia("print"))&&g.addListener&&g.addListener(function(){g.matches&&f()}))}); |
@@ -1,3 +0,3 @@ | ||
#lazysizes print extension | ||
# lazysizes print extension | ||
This simple print plugin for lazysizes will automatically unveil all element as soon as a print is detected even if the given lazyload image isn't in the viewport. |
/* | ||
This lazysizes plugin optimizes perceived performance by adding better support for rendering progressive JPGs/PNGs in conjunction with the LQIP pattern. | ||
*/ | ||
(function(document){ | ||
(function(window, factory) { | ||
var globalInstall = function(){ | ||
factory(window.lazySizes); | ||
window.removeEventListener('lazyunveilread', globalInstall, true); | ||
}; | ||
factory = factory.bind(null, window, window.document); | ||
if(typeof module == 'object' && module.exports){ | ||
factory(require('lazysizes')); | ||
} else if(window.lazySizes) { | ||
globalInstall(); | ||
} else { | ||
window.addEventListener('lazyunveilread', globalInstall, true); | ||
} | ||
}(window, function(window, document, lazySizes) { | ||
/*jshint eqnull:true */ | ||
@@ -19,2 +34,4 @@ 'use strict'; | ||
document.addEventListener('lazybeforeunveil', function(e){ | ||
if(e.detail.instance != lazySizes){return;} | ||
var img = e.target; | ||
@@ -33,2 +50,2 @@ if(!regImg.test(img.nodeName)){ | ||
} | ||
})(document); | ||
})); |
@@ -1,2 +0,2 @@ | ||
/*! lazysizes - v3.0.0 */ | ||
!function(a){"use strict";var b,c;"srcset"in a.createElement("img")&&(b=/^img$/i,c=function(a){a.target.style.backgroundSize="",a.target.style.backgroundImage="",a.target.removeEventListener(a.type,c)},a.addEventListener("lazybeforeunveil",function(a){var d=a.target;if(b.test(d.nodeName)){var e=d.getAttribute("src");e&&(d.style.backgroundSize="100% 100%",d.style.backgroundImage="url("+e+")",d.removeAttribute("src"),d.addEventListener("load",c))}},!1))}(document); | ||
/*! lazysizes - v4.0.0-rc1 */ | ||
!function(a,b){var c=function(){b(a.lazySizes),a.removeEventListener("lazyunveilread",c,!0)};b=b.bind(null,a,a.document),"object"==typeof module&&module.exports?b(require("lazysizes")):a.lazySizes?c():a.addEventListener("lazyunveilread",c,!0)}(window,function(a,b,c){"use strict";var d,e;"srcset"in b.createElement("img")&&(d=/^img$/i,e=function(a){a.target.style.backgroundSize="",a.target.style.backgroundImage="",a.target.removeEventListener(a.type,e)},b.addEventListener("lazybeforeunveil",function(a){if(a.detail.instance==c){var b=a.target;if(d.test(b.nodeName)){var f=b.getAttribute("src");f&&(b.style.backgroundSize="100% 100%",b.style.backgroundImage="url("+f+")",b.removeAttribute("src"),b.addEventListener("load",e))}}},!1))}); |
@@ -1,10 +0,10 @@ | ||
#lazysizes progressive extension | ||
# lazysizes progressive extension | ||
This plugin optimizes perceived performance by adding better support for rendering progressive JPGs/PNGs in conjunction with the LQIP pattern. | ||
##Demo | ||
## Demo | ||
- [Watch video](http://www.webpagetest.org/video/view.php?id=150207_0d904cee5186ebf124d4e3014aa5df39895618f0) | ||
- Or try yourself: [lazysizes + progressive plugin](http://codepen.io/jschroeter/full/NPwXNv) vs. [lazysizes](http://codepen.io/jschroeter/full/MYOrjB) | ||
##How it works | ||
## How it works | ||
@@ -16,7 +16,7 @@ By default, [browsers don't render images progressively when switching from one image to another](http://w3facility.org/question/progressive-jpeg-isnt-progressive-when-changing-image-src-dynamically/) (e.g. changing the `src` or adding `srcset`). | ||
##Requirements | ||
## Requirements | ||
- Use [LQIP pattern](https://github.com/aFarkas/lazysizes#lqip) | ||
- Make sure your JPGs/PNGs are saved with the progressive/interlaced option: [Online Progressive JPEG checker](http://highloadtools.com/progressivejpeg) | ||
##Browser support | ||
## Browser support | ||
All browsers with native `srcset` support. Successfully tested on | ||
@@ -23,0 +23,0 @@ - Chrome |
@@ -1,2 +0,2 @@ | ||
#lazysizes plugins/extensions/snippets | ||
# lazysizes plugins/extensions/snippets | ||
@@ -3,0 +3,0 @@ **lazysizes** works out of the box with standard and responsive images (``src``, ``srcset`` and ``picture``) and iframes. |
@@ -1,6 +0,21 @@ | ||
(function(window, document, undefined){ | ||
(function(window, factory) { | ||
var globalInstall = function(){ | ||
factory(window.lazySizes); | ||
window.removeEventListener('lazyunveilread', globalInstall, true); | ||
}; | ||
factory = factory.bind(null, window, window.document); | ||
if(typeof module == 'object' && module.exports){ | ||
factory(require('lazysizes'), require('../fix-ios-sizes/fix-ios-sizes')); | ||
} else if(window.lazySizes) { | ||
globalInstall(); | ||
} else { | ||
window.addEventListener('lazyunveilread', globalInstall, true); | ||
} | ||
}(window, function(window, document, lazySizes) { | ||
/*jshint eqnull:true */ | ||
'use strict'; | ||
var polyfill; | ||
var config = (window.lazySizes && lazySizes.cfg) || window.lazySizesConfig; | ||
var config = (lazySizes && lazySizes.cfg) || window.lazySizesConfig; | ||
var img = document.createElement('img'); | ||
@@ -303,66 +318,2 @@ var supportSrcset = ('sizes' in img) && ('srcset' in img); | ||
} | ||
})(window, document); | ||
/** | ||
* Some versions of iOS (8.1-) do load the first candidate of a srcset candidate list, if width descriptors with the sizes attribute is used. | ||
* This tiny extension prevents this wasted download by creating a picture structure around the image. | ||
* Note: This extension is already included in the ls.respimg.js file. | ||
* | ||
* Usage: | ||
* | ||
* <img | ||
* class="lazyload" | ||
* data-sizes="auto" | ||
* data-srcset="small.jpg 640px, | ||
* medium.jpg 980w, | ||
* large.jpg 1280w" | ||
* /> | ||
*/ | ||
(function(document){ | ||
'use strict'; | ||
var regPicture; | ||
var img = document.createElement('img'); | ||
if(('srcset' in img) && !('sizes' in img) && !window.HTMLPictureElement){ | ||
regPicture = /^picture$/i; | ||
document.addEventListener('lazybeforeunveil', function(e){ | ||
var elem, parent, srcset, sizes, isPicture; | ||
var picture, source; | ||
if(e.defaultPrevented || | ||
lazySizesConfig.noIOSFix || | ||
!(elem = e.target) || | ||
!(srcset = elem.getAttribute(lazySizesConfig.srcsetAttr)) || | ||
!(parent = elem.parentNode) || | ||
( | ||
!(isPicture = regPicture.test(parent.nodeName || '')) && | ||
!(sizes = elem.getAttribute('sizes') || elem.getAttribute(lazySizesConfig.sizesAttr)) | ||
) | ||
){return;} | ||
picture = isPicture ? parent : document.createElement('picture'); | ||
if(!elem._lazyImgSrc){ | ||
Object.defineProperty(elem, '_lazyImgSrc', { | ||
value: document.createElement('source'), | ||
writable: true | ||
}); | ||
} | ||
source = elem._lazyImgSrc; | ||
if(sizes){ | ||
source.setAttribute('sizes', sizes); | ||
} | ||
source.setAttribute(lazySizesConfig.srcsetAttr, srcset); | ||
elem.setAttribute('data-pfsrcset', srcset); | ||
elem.removeAttribute(lazySizesConfig.srcsetAttr); | ||
if(!isPicture){ | ||
parent.insertBefore(picture, elem); | ||
picture.appendChild(elem); | ||
} | ||
picture.insertBefore(source, elem); | ||
}); | ||
} | ||
})(document); | ||
})); |
@@ -1,2 +0,2 @@ | ||
/*! lazysizes - v3.0.0 */ | ||
!function(a,b,c){"use strict";var d,e=a.lazySizes&&lazySizes.cfg||a.lazySizesConfig,f=b.createElement("img"),g="sizes"in f&&"srcset"in f,h=/\s+\d+h/g,i=function(){var a=/\s+(\d+)(w|h)\s+(\d+)(w|h)/,c=Array.prototype.forEach;return function(d){var e=b.createElement("img"),f=function(b){var c,d=b.getAttribute(lazySizesConfig.srcsetAttr);d&&(d.match(a)&&(c="w"==RegExp.$2?RegExp.$1/RegExp.$3:RegExp.$3/RegExp.$1,c&&b.setAttribute("data-aspectratio",c)),b.setAttribute(lazySizesConfig.srcsetAttr,d.replace(h,"")))},g=function(a){var b=a.target.parentNode;b&&"PICTURE"==b.nodeName&&c.call(b.getElementsByTagName("source"),f),f(a.target)},i=function(){e.currentSrc&&b.removeEventListener("lazybeforeunveil",g)};d[1]&&(b.addEventListener("lazybeforeunveil",g),e.onload=i,e.onerror=i,e.srcset="data:,a 1w 1h",e.complete&&i())}}();if(e||(e={},a.lazySizesConfig=e),e.supportsType||(e.supportsType=function(a){return!a}),!a.picturefill&&!e.pf){if(a.HTMLPictureElement&&g)return b.msElementsFromPoint&&i(navigator.userAgent.match(/Edge\/(\d+)/)),void(e.pf=function(){});e.pf=function(b){var c,e;if(!a.picturefill)for(c=0,e=b.elements.length;e>c;c++)d(b.elements[c])},d=function(){var c=function(a,b){return a.w-b.w},f=/^\s*\d+\.*\d*px\s*$/,i=function(a){var b,c,d=a.length,e=a[d-1],f=0;for(f;d>f;f++)if(e=a[f],e.d=e.w/a.w,e.d>=a.d){!e.cached&&(b=a[f-1])&&b.d>a.d-.13*Math.pow(a.d,2.2)&&(c=Math.pow(b.d-.6,1.6),b.cached&&(b.d+=.15*c),b.d+(e.d-a.d)*c>a.d&&(e=b));break}return e},j=function(){var a,b=/(([^,\s].[^\s]+)\s+(\d+)w)/g,c=/\s/,d=function(b,c,d,e){a.push({c:c,u:d,w:1*e})};return function(e){return a=[],e=e.trim(),e.replace(h,"").replace(b,d),a.length||!e||c.test(e)||a.push({c:e,u:e,w:99}),a}}(),k=function(){k.init||(k.init=!0,addEventListener("resize",function(){var a,c=b.getElementsByClassName("lazymatchmedia"),e=function(){var a,b;for(a=0,b=c.length;b>a;a++)d(c[a])};return function(){clearTimeout(a),a=setTimeout(e,66)}}()))},l=function(b,c){var d,f=b.getAttribute("srcset")||b.getAttribute(e.srcsetAttr);!f&&c&&(f=b._lazypolyfill?b._lazypolyfill._set:b.getAttribute(e.srcAttr)||b.getAttribute("src")),b._lazypolyfill&&b._lazypolyfill._set==f||(d=j(f||""),c&&b.parentNode&&(d.isPicture="PICTURE"==b.parentNode.nodeName.toUpperCase(),d.isPicture&&a.matchMedia&&(lazySizes.aC(b,"lazymatchmedia"),k())),d._set=f,Object.defineProperty(b,"_lazypolyfill",{value:d,writable:!0}))},m=function(b){var c=a.devicePixelRatio||1,d=lazySizes.getX&&lazySizes.getX(b);return Math.min(d||c,2.5,c)},n=function(b){return a.matchMedia?(n=function(a){return!a||(matchMedia(a)||{}).matches})(b):!b},o=function(a){var b,d,g,h,j,k,o;if(h=a,l(h,!0),j=h._lazypolyfill,j.isPicture)for(d=0,b=a.parentNode.getElementsByTagName("source"),g=b.length;g>d;d++)if(e.supportsType(b[d].getAttribute("type"),a)&&n(b[d].getAttribute("media"))){h=b[d],l(h),j=h._lazypolyfill;break}return j.length>1?(o=h.getAttribute("sizes")||"",o=f.test(o)&&parseInt(o,10)||lazySizes.gW(a,a.parentNode),j.d=m(a),!j.src||!j.w||j.w<o?(j.w=o,k=i(j.sort(c)),j.src=k):k=j.src):k=j[0],k},p=function(a){if(!g||!a.parentNode||"PICTURE"==a.parentNode.nodeName.toUpperCase()){var b=o(a);b&&b.u&&a._lazypolyfill.cur!=b.u&&(a._lazypolyfill.cur=b.u,b.cached=!0,a.setAttribute(e.srcAttr,b.u),a.setAttribute("src",b.u))}};return p.parse=j,p}(),e.loadedClass&&e.loadingClass&&!function(){var a=[];['img[sizes$="px"][srcset].',"picture > img:not([srcset])."].forEach(function(b){a.push(b+e.loadedClass),a.push(b+e.loadingClass)}),e.pf({elements:b.querySelectorAll(a.join(", "))})}()}}(window,document),function(a){"use strict";var b,c=a.createElement("img");!("srcset"in c)||"sizes"in c||window.HTMLPictureElement||(b=/^picture$/i,a.addEventListener("lazybeforeunveil",function(c){var d,e,f,g,h,i,j;!c.defaultPrevented&&!lazySizesConfig.noIOSFix&&(d=c.target)&&(f=d.getAttribute(lazySizesConfig.srcsetAttr))&&(e=d.parentNode)&&((h=b.test(e.nodeName||""))||(g=d.getAttribute("sizes")||d.getAttribute(lazySizesConfig.sizesAttr)))&&(i=h?e:a.createElement("picture"),d._lazyImgSrc||Object.defineProperty(d,"_lazyImgSrc",{value:a.createElement("source"),writable:!0}),j=d._lazyImgSrc,g&&j.setAttribute("sizes",g),j.setAttribute(lazySizesConfig.srcsetAttr,f),d.setAttribute("data-pfsrcset",f),d.removeAttribute(lazySizesConfig.srcsetAttr),h||(e.insertBefore(i,d),i.appendChild(d)),i.insertBefore(j,d))}))}(document); | ||
/*! lazysizes - v4.0.0-rc1 */ | ||
!function(a,b){var c=function(){b(a.lazySizes),a.removeEventListener("lazyunveilread",c,!0)};b=b.bind(null,a,a.document),"object"==typeof module&&module.exports?b(require("lazysizes"),require("../fix-ios-sizes/fix-ios-sizes")):a.lazySizes?c():a.addEventListener("lazyunveilread",c,!0)}(window,function(a,b,c){"use strict";var d,e=c&&c.cfg||a.lazySizesConfig,f=b.createElement("img"),g="sizes"in f&&"srcset"in f,h=/\s+\d+h/g,i=function(){var a=/\s+(\d+)(w|h)\s+(\d+)(w|h)/,c=Array.prototype.forEach;return function(d){var e=b.createElement("img"),f=function(b){var c,d=b.getAttribute(lazySizesConfig.srcsetAttr);d&&(d.match(a)&&(c="w"==RegExp.$2?RegExp.$1/RegExp.$3:RegExp.$3/RegExp.$1,c&&b.setAttribute("data-aspectratio",c)),b.setAttribute(lazySizesConfig.srcsetAttr,d.replace(h,"")))},g=function(a){var b=a.target.parentNode;b&&"PICTURE"==b.nodeName&&c.call(b.getElementsByTagName("source"),f),f(a.target)},i=function(){e.currentSrc&&b.removeEventListener("lazybeforeunveil",g)};d[1]&&(b.addEventListener("lazybeforeunveil",g),e.onload=i,e.onerror=i,e.srcset="data:,a 1w 1h",e.complete&&i())}}();if(e||(e={},a.lazySizesConfig=e),e.supportsType||(e.supportsType=function(a){return!a}),!a.picturefill&&!e.pf){if(a.HTMLPictureElement&&g)return b.msElementsFromPoint&&i(navigator.userAgent.match(/Edge\/(\d+)/)),void(e.pf=function(){});e.pf=function(b){var c,e;if(!a.picturefill)for(c=0,e=b.elements.length;e>c;c++)d(b.elements[c])},d=function(){var f=function(a,b){return a.w-b.w},i=/^\s*\d+\.*\d*px\s*$/,j=function(a){var b,c,d=a.length,e=a[d-1],f=0;for(f;d>f;f++)if(e=a[f],e.d=e.w/a.w,e.d>=a.d){!e.cached&&(b=a[f-1])&&b.d>a.d-.13*Math.pow(a.d,2.2)&&(c=Math.pow(b.d-.6,1.6),b.cached&&(b.d+=.15*c),b.d+(e.d-a.d)*c>a.d&&(e=b));break}return e},k=function(){var a,b=/(([^,\s].[^\s]+)\s+(\d+)w)/g,c=/\s/,d=function(b,c,d,e){a.push({c:c,u:d,w:1*e})};return function(e){return a=[],e=e.trim(),e.replace(h,"").replace(b,d),a.length||!e||c.test(e)||a.push({c:e,u:e,w:99}),a}}(),l=function(){l.init||(l.init=!0,addEventListener("resize",function(){var a,c=b.getElementsByClassName("lazymatchmedia"),e=function(){var a,b;for(a=0,b=c.length;b>a;a++)d(c[a])};return function(){clearTimeout(a),a=setTimeout(e,66)}}()))},m=function(b,d){var f,g=b.getAttribute("srcset")||b.getAttribute(e.srcsetAttr);!g&&d&&(g=b._lazypolyfill?b._lazypolyfill._set:b.getAttribute(e.srcAttr)||b.getAttribute("src")),b._lazypolyfill&&b._lazypolyfill._set==g||(f=k(g||""),d&&b.parentNode&&(f.isPicture="PICTURE"==b.parentNode.nodeName.toUpperCase(),f.isPicture&&a.matchMedia&&(c.aC(b,"lazymatchmedia"),l())),f._set=g,Object.defineProperty(b,"_lazypolyfill",{value:f,writable:!0}))},n=function(b){var d=a.devicePixelRatio||1,e=c.getX&&c.getX(b);return Math.min(e||d,2.5,d)},o=function(b){return a.matchMedia?(o=function(a){return!a||(matchMedia(a)||{}).matches})(b):!b},p=function(a){var b,d,g,h,k,l,p;if(h=a,m(h,!0),k=h._lazypolyfill,k.isPicture)for(d=0,b=a.parentNode.getElementsByTagName("source"),g=b.length;g>d;d++)if(e.supportsType(b[d].getAttribute("type"),a)&&o(b[d].getAttribute("media"))){h=b[d],m(h),k=h._lazypolyfill;break}return k.length>1?(p=h.getAttribute("sizes")||"",p=i.test(p)&&parseInt(p,10)||c.gW(a,a.parentNode),k.d=n(a),!k.src||!k.w||k.w<p?(k.w=p,l=j(k.sort(f)),k.src=l):l=k.src):l=k[0],l},q=function(a){if(!g||!a.parentNode||"PICTURE"==a.parentNode.nodeName.toUpperCase()){var b=p(a);b&&b.u&&a._lazypolyfill.cur!=b.u&&(a._lazypolyfill.cur=b.u,b.cached=!0,a.setAttribute(e.srcAttr,b.u),a.setAttribute("src",b.u))}};return q.parse=k,q}(),e.loadedClass&&e.loadingClass&&!function(){var a=[];['img[sizes$="px"][srcset].',"picture > img:not([srcset])."].forEach(function(b){a.push(b+e.loadedClass),a.push(b+e.loadingClass)}),e.pf({elements:b.querySelectorAll(a.join(", "))})}()}}); |
@@ -1,2 +0,2 @@ | ||
#lazysizes respimg polyfill extension | ||
# lazysizes respimg polyfill extension | ||
@@ -7,7 +7,7 @@ While [picturefill](https://github.com/scottjehl/picturefill) are full functional responsive images polyfills, the lazySizes respimg polyfill extension is only a partial polyfill, which supports only the most important subset of the native responsive images standard and only in conjunction with the lazySizes core script. | ||
##constrained Markup support | ||
## constrained Markup support | ||
This plugin supports both art directed responsive images using the ``picture`` element as also resolution switching based on ``data-srcset`` using the width descriptor (and of course the combination of both). | ||
###What is *not* supported: | ||
### What is *not* supported: | ||
@@ -21,3 +21,3 @@ - The use of explicit density descriptors (**x** descriptor) are not supported (This should not be a problem, because all use cases of the density descriptor can always also be substituted with a width descriptor). | ||
###What is *fully* supported | ||
### What is *fully* supported | ||
@@ -100,3 +100,3 @@ Aside from above mentioned constraints everything else is fully supported. Here are some practical examples of fully supported responsive images: | ||
###Tip: Using/Generating more complex dynamic ``sizes`` | ||
### Tip: Using/Generating more complex dynamic ``sizes`` | ||
@@ -103,0 +103,0 @@ As explained above this partial polyfill only accepts one value for ``sizes`` using only the *px* length. Due to the fact, that also ``data-sizes="auto"`` is supported the ``lazybeforesizes`` event can be used to dynamically change/add different ``sizes``: |
@@ -1,7 +0,20 @@ | ||
(function(window, document, undefined){ | ||
(function(window, factory) { | ||
var globalInstall = function(){ | ||
factory(window.lazySizes); | ||
window.removeEventListener('lazyunveilread', globalInstall, true); | ||
}; | ||
factory = factory.bind(null, window, window.document); | ||
if(typeof module == 'object' && module.exports){ | ||
factory(require('lazysizes')); | ||
} else if(window.lazySizes) { | ||
globalInstall(); | ||
} else { | ||
window.addEventListener('lazyunveilread', globalInstall, true); | ||
} | ||
}(window, function(window, document, lazySizes) { | ||
/*jshint eqnull:true */ | ||
'use strict'; | ||
if(!document.addEventListener){return;} | ||
var config, riasCfg; | ||
@@ -34,3 +47,3 @@ var replaceTypes = {string: 1, number: 1}; | ||
config = (window.lazySizes && lazySizes.cfg) || window.lazySizesConfig; | ||
config = (lazySizes && lazySizes.cfg) || window.lazySizesConfig; | ||
@@ -214,2 +227,4 @@ if(!config){ | ||
addEventListener('lazybeforesizes', function(e){ | ||
if(e.detail.instance != lazySizes){return;} | ||
var elem, src, elemOpts, parent, sources, i, len, sourceSrc, sizes, detail, hasPlaceholder, modified, emptyList; | ||
@@ -342,2 +357,4 @@ elem = e.target; | ||
var polyfill = function(e){ | ||
if(e.detail.instance != lazySizes){return;} | ||
var candidate; | ||
@@ -377,2 +394,2 @@ var elem = e.target; | ||
})(window, document); | ||
})); |
@@ -1,2 +0,2 @@ | ||
/*! lazysizes - v3.0.0 */ | ||
!function(a,b,c){"use strict";function d(b,c){var d,e,f,g,h=a.getComputedStyle(b);e=b.parentNode,g={isPicture:!(!e||!m.test(e.nodeName||""))},f=function(a,c){var d=b.getAttribute("data-"+a);if(!d){var e=h.getPropertyValue("--ls-"+a);e&&(d=e.trim())}if(d){if("true"==d)d=!0;else if("false"==d)d=!1;else if(l.test(d))d=parseFloat(d);else if("function"==typeof j[a])d=j[a](b,d);else if(q.test(d))try{d=JSON.parse(d)}catch(f){}g[a]=d}else a in j&&"function"!=typeof j[a]?g[a]=j[a]:c&&"function"==typeof j[a]&&(g[a]=j[a](b,d))};for(d in j)f(d);return c.replace(p,function(a,b){b in g||f(b,!0)}),g}function e(a,b){var c=[],d=function(a,c){return k[typeof b[c]]?b[c]:a};return c.srcset=[],b.absUrl&&(s.setAttribute("href",a),a=s.href),a=((b.prefix||"")+a+(b.postfix||"")).replace(p,d),b.widths.forEach(function(d){var e=b.widthmap[d]||d,f={u:a.replace(n,e).replace(o,b.ratio?Math.round(d*b.ratio):""),w:d};c.push(f),c.srcset.push(f.c=f.u+" "+d+"w")}),c}function f(a,c,d){var f=0,g=0,h=d;if(a){if("container"===c.ratio){for(f=h.scrollWidth,g=h.scrollHeight;!(f&&g||h===b);)h=h.parentNode,f=h.scrollWidth,g=h.scrollHeight;f&&g&&(c.ratio=g/f)}a=e(a,c),a.isPicture=c.isPicture,u&&"IMG"==d.nodeName.toUpperCase()?d.removeAttribute(i.srcsetAttr):d.setAttribute(i.srcsetAttr,a.srcset.join(", ")),Object.defineProperty(d,"_lazyrias",{value:a,writable:!0})}}function g(a,b){var c=d(a,b);return j.modifyOptions.call(a,{target:a,details:c,detail:c}),lazySizes.fire(a,"lazyriasmodifyoptions",c),c}function h(a){return a.getAttribute(a.getAttribute("data-srcattr")||j.srcAttr)||a.getAttribute(i.srcsetAttr)||a.getAttribute(i.srcAttr)||a.getAttribute("data-pfsrcset")||""}if(b.addEventListener){var i,j,k={string:1,number:1},l=/^\-*\+*\d+\.*\d*$/,m=/^picture$/i,n=/\s*\{\s*width\s*\}\s*/i,o=/\s*\{\s*height\s*\}\s*/i,p=/\s*\{\s*([a-z0-9]+)\s*\}\s*/gi,q=/^\[.*\]|\{.*\}$/,r=/^(?:auto|\d+(px)?)$/,s=b.createElement("a"),t=b.createElement("img"),u="srcset"in t&&!("sizes"in t),v=!!a.HTMLPictureElement&&!u;!function(){var b,c=function(){},d={prefix:"",postfix:"",srcAttr:"data-src",absUrl:!1,modifyOptions:c,widthmap:{},ratio:!1};i=a.lazySizes&&lazySizes.cfg||a.lazySizesConfig,i||(i={},a.lazySizesConfig=i),i.supportsType||(i.supportsType=function(a){return!a}),i.rias||(i.rias={}),j=i.rias,"widths"in j||(j.widths=[],function(a){for(var b,c=0;!b||3e3>b;)c+=5,c>30&&(c+=1),b=36*c,a.push(b)}(j.widths));for(b in d)b in j||(j[b]=d[b])}(),addEventListener("lazybeforesizes",function(a){var b,c,d,e,k,l,m,o,p,q,s,t,u;if(b=a.target,a.detail.dataAttr&&!a.defaultPrevented&&!j.disabled&&(p=b.getAttribute(i.sizesAttr)||b.getAttribute("sizes"))&&r.test(p)){if(c=h(b),d=g(b,c),s=n.test(d.prefix)||n.test(d.postfix),d.isPicture&&(e=b.parentNode))for(k=e.getElementsByTagName("source"),l=0,m=k.length;m>l;l++)(s||n.test(o=h(k[l])))&&(f(o,d,k[l]),t=!0);s||n.test(c)?(f(c,d,b),t=!0):t&&(u=[],u.srcset=[],u.isPicture=!0,Object.defineProperty(b,"_lazyrias",{value:u,writable:!0})),t&&(v?b.removeAttribute(i.srcAttr):"auto"!=p&&(q={width:parseInt(p,10)},w({target:b,detail:q})))}},!0);var w=function(){var c=function(a,b){return a.w-b.w},d=function(a){var b,c,d=a.length,e=a[d-1],f=0;for(f;d>f;f++)if(e=a[f],e.d=e.w/a.w,e.d>=a.d){!e.cached&&(b=a[f-1])&&b.d>a.d-.13*Math.pow(a.d,2.2)&&(c=Math.pow(b.d-.6,1.6),b.cached&&(b.d+=.15*c),b.d+(e.d-a.d)*c>a.d&&(e=b));break}return e},e=function(a,b){var c;return!a._lazyrias&&lazySizes.pWS&&(c=lazySizes.pWS(a.getAttribute(i.srcsetAttr||""))).length&&(Object.defineProperty(a,"_lazyrias",{value:c,writable:!0}),b&&a.parentNode&&(c.isPicture="PICTURE"==a.parentNode.nodeName.toUpperCase())),a._lazyrias},f=function(b){var c=a.devicePixelRatio||1,d=lazySizes.getX&&lazySizes.getX(b);return Math.min(d||c,2.4,c)},g=function(b,g){var h,i,j,k,l,m;if(l=b._lazyrias,l.isPicture&&a.matchMedia)for(i=0,h=b.parentNode.getElementsByTagName("source"),j=h.length;j>i;i++)if(e(h[i])&&!h[i].getAttribute("type")&&(!(k=h[i].getAttribute("media"))||(matchMedia(k)||{}).matches)){l=h[i]._lazyrias;break}return(!l.w||l.w<g)&&(l.w=g,l.d=f(b),m=d(l.sort(c))),m},h=function(c){var d,f=c.target;return!u&&(a.respimage||a.picturefill||lazySizesConfig.pf)?void b.removeEventListener("lazybeforesizes",h):void(("_lazyrias"in f||c.detail.dataAttr&&e(f,!0))&&(d=g(f,c.detail.width),d&&d.u&&f._lazyrias.cur!=d.u&&(f._lazyrias.cur=d.u,d.cached=!0,lazySizes.rAF(function(){f.setAttribute(i.srcAttr,d.u),f.setAttribute("src",d.u)}))))};return v?h=function(){}:addEventListener("lazybeforesizes",h),h}()}}(window,document); | ||
/*! lazysizes - v4.0.0-rc1 */ | ||
!function(a,b){var c=function(){b(a.lazySizes),a.removeEventListener("lazyunveilread",c,!0)};b=b.bind(null,a,a.document),"object"==typeof module&&module.exports?b(require("lazysizes")):a.lazySizes?c():a.addEventListener("lazyunveilread",c,!0)}(window,function(a,b,c){"use strict";function d(b,c){var d,e,f,g,h=a.getComputedStyle(b);e=b.parentNode,g={isPicture:!(!e||!m.test(e.nodeName||""))},f=function(a,c){var d=b.getAttribute("data-"+a);if(!d){var e=h.getPropertyValue("--ls-"+a);e&&(d=e.trim())}if(d){if("true"==d)d=!0;else if("false"==d)d=!1;else if(l.test(d))d=parseFloat(d);else if("function"==typeof j[a])d=j[a](b,d);else if(q.test(d))try{d=JSON.parse(d)}catch(f){}g[a]=d}else a in j&&"function"!=typeof j[a]?g[a]=j[a]:c&&"function"==typeof j[a]&&(g[a]=j[a](b,d))};for(d in j)f(d);return c.replace(p,function(a,b){b in g||f(b,!0)}),g}function e(a,b){var c=[],d=function(a,c){return k[typeof b[c]]?b[c]:a};return c.srcset=[],b.absUrl&&(s.setAttribute("href",a),a=s.href),a=((b.prefix||"")+a+(b.postfix||"")).replace(p,d),b.widths.forEach(function(d){var e=b.widthmap[d]||d,f={u:a.replace(n,e).replace(o,b.ratio?Math.round(d*b.ratio):""),w:d};c.push(f),c.srcset.push(f.c=f.u+" "+d+"w")}),c}function f(a,c,d){var f=0,g=0,h=d;if(a){if("container"===c.ratio){for(f=h.scrollWidth,g=h.scrollHeight;!(f&&g||h===b);)h=h.parentNode,f=h.scrollWidth,g=h.scrollHeight;f&&g&&(c.ratio=g/f)}a=e(a,c),a.isPicture=c.isPicture,u&&"IMG"==d.nodeName.toUpperCase()?d.removeAttribute(i.srcsetAttr):d.setAttribute(i.srcsetAttr,a.srcset.join(", ")),Object.defineProperty(d,"_lazyrias",{value:a,writable:!0})}}function g(a,b){var e=d(a,b);return j.modifyOptions.call(a,{target:a,details:e,detail:e}),c.fire(a,"lazyriasmodifyoptions",e),e}function h(a){return a.getAttribute(a.getAttribute("data-srcattr")||j.srcAttr)||a.getAttribute(i.srcsetAttr)||a.getAttribute(i.srcAttr)||a.getAttribute("data-pfsrcset")||""}var i,j,k={string:1,number:1},l=/^\-*\+*\d+\.*\d*$/,m=/^picture$/i,n=/\s*\{\s*width\s*\}\s*/i,o=/\s*\{\s*height\s*\}\s*/i,p=/\s*\{\s*([a-z0-9]+)\s*\}\s*/gi,q=/^\[.*\]|\{.*\}$/,r=/^(?:auto|\d+(px)?)$/,s=b.createElement("a"),t=b.createElement("img"),u="srcset"in t&&!("sizes"in t),v=!!a.HTMLPictureElement&&!u;!function(){var b,d=function(){},e={prefix:"",postfix:"",srcAttr:"data-src",absUrl:!1,modifyOptions:d,widthmap:{},ratio:!1};i=c&&c.cfg||a.lazySizesConfig,i||(i={},a.lazySizesConfig=i),i.supportsType||(i.supportsType=function(a){return!a}),i.rias||(i.rias={}),j=i.rias,"widths"in j||(j.widths=[],function(a){for(var b,c=0;!b||3e3>b;)c+=5,c>30&&(c+=1),b=36*c,a.push(b)}(j.widths));for(b in e)b in j||(j[b]=e[b])}(),addEventListener("lazybeforesizes",function(a){if(a.detail.instance==c){var b,d,e,k,l,m,o,p,q,s,t,u,x;if(b=a.target,a.detail.dataAttr&&!a.defaultPrevented&&!j.disabled&&(q=b.getAttribute(i.sizesAttr)||b.getAttribute("sizes"))&&r.test(q)){if(d=h(b),e=g(b,d),t=n.test(e.prefix)||n.test(e.postfix),e.isPicture&&(k=b.parentNode))for(l=k.getElementsByTagName("source"),m=0,o=l.length;o>m;m++)(t||n.test(p=h(l[m])))&&(f(p,e,l[m]),u=!0);t||n.test(d)?(f(d,e,b),u=!0):u&&(x=[],x.srcset=[],x.isPicture=!0,Object.defineProperty(b,"_lazyrias",{value:x,writable:!0})),u&&(v?b.removeAttribute(i.srcAttr):"auto"!=q&&(s={width:parseInt(q,10)},w({target:b,detail:s})))}}},!0);var w=function(){var d=function(a,b){return a.w-b.w},e=function(a){var b,c,d=a.length,e=a[d-1],f=0;for(f;d>f;f++)if(e=a[f],e.d=e.w/a.w,e.d>=a.d){!e.cached&&(b=a[f-1])&&b.d>a.d-.13*Math.pow(a.d,2.2)&&(c=Math.pow(b.d-.6,1.6),b.cached&&(b.d+=.15*c),b.d+(e.d-a.d)*c>a.d&&(e=b));break}return e},f=function(a,b){var d;return!a._lazyrias&&c.pWS&&(d=c.pWS(a.getAttribute(i.srcsetAttr||""))).length&&(Object.defineProperty(a,"_lazyrias",{value:d,writable:!0}),b&&a.parentNode&&(d.isPicture="PICTURE"==a.parentNode.nodeName.toUpperCase())),a._lazyrias},g=function(b){var d=a.devicePixelRatio||1,e=c.getX&&c.getX(b);return Math.min(e||d,2.4,d)},h=function(b,c){var h,i,j,k,l,m;if(l=b._lazyrias,l.isPicture&&a.matchMedia)for(i=0,h=b.parentNode.getElementsByTagName("source"),j=h.length;j>i;i++)if(f(h[i])&&!h[i].getAttribute("type")&&(!(k=h[i].getAttribute("media"))||(matchMedia(k)||{}).matches)){l=h[i]._lazyrias;break}return(!l.w||l.w<c)&&(l.w=c,l.d=g(b),m=e(l.sort(d))),m},j=function(d){if(d.detail.instance==c){var e,g=d.target;return!u&&(a.respimage||a.picturefill||lazySizesConfig.pf)?void b.removeEventListener("lazybeforesizes",j):void(("_lazyrias"in g||d.detail.dataAttr&&f(g,!0))&&(e=h(g,d.detail.width),e&&e.u&&g._lazyrias.cur!=e.u&&(g._lazyrias.cur=e.u,e.cached=!0,c.rAF(function(){g.setAttribute(i.srcAttr,e.u),g.setAttribute("src",e.u)}))))}};return v?j=function(){}:addEventListener("lazybeforesizes",j),j}()}); |
@@ -1,2 +0,2 @@ | ||
#lazySizes RIaS extension (Responsive image as a service / Responsive image on demand) | ||
# lazySizes RIaS extension (Responsive image as a service / Responsive image on demand) | ||
@@ -11,3 +11,3 @@ The RiaS plugin enables lazySizes to generate the best suitable image source based on an URL pattern. It works with pre-build images (i.e. grunt-responsive-images) as also with any third party (ReSrc, Pixtulate, mobify, WURFL's Image Tailor ...) or self hosted restful responsive image services (responsive image on demand). | ||
##Basic/quick usage | ||
## Basic/quick usage | ||
@@ -39,6 +39,6 @@ * Add the RiaS plugin right before the lazySizes script or concat those scripts into your script bundle: | ||
##[Demo](http://afarkas.github.io/lazysizes/rias/) | ||
## [Demo](http://afarkas.github.io/lazysizes/rias/) | ||
A [demo with markup and code examples can be seen here](http://afarkas.github.io/lazysizes/rias/). | ||
##Configuration/Options | ||
## Configuration/Options | ||
@@ -86,3 +86,3 @@ The RIaS plugin can be configured through the ``lazySizesConfig.rias`` option object, which should be configured before the lazySizes script. | ||
###URL generation and {placeholder}s | ||
### URL generation and {placeholder}s | ||
@@ -93,3 +93,3 @@ The url is dynamically generated by replacing placeholder values, which are enclosed by curly brackets. | ||
###List of Options | ||
### List of Options | ||
@@ -162,5 +162,5 @@ * ``lazySizesConfig.rias.srcAttr`` (default: ``"data-src"``): The attribute, which should be transformed to ``src``/``srcset``. (The extension will also automatically check the ``lazySizesConfig.srcsetAttr`` and ``lazySizesConfig.srcAttr``) | ||
##Advanced Examples | ||
## Advanced Examples | ||
###Embedding via CDN and combohandler | ||
### Embedding via CDN and combohandler | ||
@@ -173,3 +173,3 @@ In case you want to use a CDN you can use jsDelivr's combohandler service: | ||
###Using art direction | ||
### Using art direction | ||
@@ -202,6 +202,6 @@ In case you want to use art direction simply also use placeholder urls inside of your ``source[data-srcset]`` or ``source[data-src]`` attributes. | ||
###Using different ``widths`` options for different images | ||
### Using different ``widths`` options for different images | ||
Often you will have different image formats with different allowed available ``widths``. This can be configured in two ways: | ||
####Descriptive way the ``data-widths`` attribute | ||
#### Descriptive way the ``data-widths`` attribute | ||
@@ -225,3 +225,3 @@ ```html | ||
####Scripted way using the ``lazyriasmodifyoptions`` event | ||
#### Scripted way using the ``lazyriasmodifyoptions`` event | ||
@@ -260,3 +260,3 @@ | ||
###Overriding existing placeholders or Extending new placeholders | ||
### Overriding existing placeholders or Extending new placeholders | ||
@@ -335,3 +335,3 @@ The RIaS plugin is highly flexible in extending possible {placeholder} values. Each {placeholder} will be tried to be replaced by searching it in the ``lazySizesConfig.rias`` option object or by searching for a corresponding ``data-*`` attribute. | ||
###Tip: Constraining the pixel density for a generated ``srcset`` attribute. | ||
### Tip: Constraining the pixel density for a generated ``srcset`` attribute. | ||
@@ -338,0 +338,0 @@ In case you don't want to generate additional compressive images for high resolution displays you can combine the RIaS extension with the [optimumx extension](../optimumx) to constrain the maximum pixel density for the generated ``srcset`` list. |
/** | ||
* FF's first picture implementation is static and does not react to viewport changes, this tiny script fixes this. | ||
*/ | ||
(function(window) { | ||
(function(window, factory) { | ||
var globalInstall = function(){ | ||
factory(window.lazySizes); | ||
window.removeEventListener('lazyunveilread', globalInstall, true); | ||
}; | ||
factory = factory.bind(null, window, window.document); | ||
if(typeof module == 'object' && module.exports){ | ||
factory(require('lazysizes')); | ||
} else if(window.lazySizes) { | ||
globalInstall(); | ||
} else { | ||
window.addEventListener('lazyunveilread', globalInstall, true); | ||
} | ||
}(window, function(window, document, lazySizes) { | ||
/*jshint eqnull:true */ | ||
@@ -66,2 +81,2 @@ var ua = navigator.userAgent; | ||
} | ||
})(window); | ||
})); |
@@ -1,2 +0,2 @@ | ||
/*! lazysizes - v3.0.0 */ | ||
!function(a){var b=navigator.userAgent;a.HTMLPictureElement&&/ecko/.test(b)&&b.match(/rv\:(\d+)/)&&RegExp.$1<41&&addEventListener("resize",function(){var b,c=document.createElement("source"),d=function(a){var b,d,e=a.parentNode;"PICTURE"===e.nodeName.toUpperCase()?(b=c.cloneNode(),e.insertBefore(b,e.firstElementChild),setTimeout(function(){e.removeChild(b)})):(!a._pfLastSize||a.offsetWidth>a._pfLastSize)&&(a._pfLastSize=a.offsetWidth,d=a.sizes,a.sizes+=",100vw",setTimeout(function(){a.sizes=d}))},e=function(){var a,b=document.querySelectorAll("picture > img, img[srcset][sizes]");for(a=0;a<b.length;a++)d(b[a])},f=function(){clearTimeout(b),b=setTimeout(e,99)},g=a.matchMedia&&matchMedia("(orientation: landscape)"),h=function(){f(),g&&g.addListener&&g.addListener(f)};return c.srcset="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==",/^[c|i]|d$/.test(document.readyState||"")?h():document.addEventListener("DOMContentLoaded",h),f}())}(window); | ||
/*! lazysizes - v4.0.0-rc1 */ | ||
!function(a,b){var c=function(){b(a.lazySizes),a.removeEventListener("lazyunveilread",c,!0)};b=b.bind(null,a,a.document),"object"==typeof module&&module.exports?b(require("lazysizes")):a.lazySizes?c():a.addEventListener("lazyunveilread",c,!0)}(window,function(a,b,c){var d=navigator.userAgent;a.HTMLPictureElement&&/ecko/.test(d)&&d.match(/rv\:(\d+)/)&&RegExp.$1<41&&addEventListener("resize",function(){var c,d=b.createElement("source"),e=function(a){var b,c,e=a.parentNode;"PICTURE"===e.nodeName.toUpperCase()?(b=d.cloneNode(),e.insertBefore(b,e.firstElementChild),setTimeout(function(){e.removeChild(b)})):(!a._pfLastSize||a.offsetWidth>a._pfLastSize)&&(a._pfLastSize=a.offsetWidth,c=a.sizes,a.sizes+=",100vw",setTimeout(function(){a.sizes=c}))},f=function(){var a,c=b.querySelectorAll("picture > img, img[srcset][sizes]");for(a=0;a<c.length;a++)e(c[a])},g=function(){clearTimeout(c),c=setTimeout(f,99)},h=a.matchMedia&&matchMedia("(orientation: landscape)"),i=function(){g(),h&&h.addListener&&h.addListener(g)};return d.srcset="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==",/^[c|i]|d$/.test(b.readyState||"")?i():b.addEventListener("DOMContentLoaded",i),g}())}); |
@@ -1,2 +0,17 @@ | ||
(function(){ | ||
(function(window, factory) { | ||
var globalInstall = function(){ | ||
factory(window.lazySizes); | ||
window.removeEventListener('lazyunveilread', globalInstall, true); | ||
}; | ||
factory = factory.bind(null, window, window.document); | ||
if(typeof module == 'object' && module.exports){ | ||
factory(require('lazysizes')); | ||
} else if(window.lazySizes) { | ||
globalInstall(); | ||
} else { | ||
window.addEventListener('lazyunveilread', globalInstall, true); | ||
} | ||
}(window, function(window, document, lazySizes) { | ||
/* | ||
@@ -38,2 +53,4 @@ @example | ||
document.addEventListener('lazybeforeunveil', function(e){ | ||
if(e.detail.instance != lazySizes){return;} | ||
var twttrWidget = e.target.getAttribute('data-twitter'); | ||
@@ -47,2 +64,2 @@ | ||
})(); | ||
})); |
@@ -1,2 +0,2 @@ | ||
/*! lazysizes - v3.0.0 */ | ||
!function(){"use strict";function a(){if(window.twttr&&twttr.widgets)return void twttr.widgets.load();if(!b){var a=document.createElement("script"),c=document.getElementsByTagName("script")[0];a.src="//platform.twitter.com/widgets.js",b=!0,c.parentNode.insertBefore(a,c)}}var b;document.addEventListener("lazybeforeunveil",function(b){var c=b.target.getAttribute("data-twitter");c&&(lazySizes.aC(b.target,c),a())})}(); | ||
/*! lazysizes - v4.0.0-rc1 */ | ||
!function(a,b){var c=function(){b(a.lazySizes),a.removeEventListener("lazyunveilread",c,!0)};b=b.bind(null,a,a.document),"object"==typeof module&&module.exports?b(require("lazysizes")):a.lazySizes?c():a.addEventListener("lazyunveilread",c,!0)}(window,function(a,b,c){"use strict";function d(){if(a.twttr&&twttr.widgets)return void twttr.widgets.load();if(!e){var c=b.createElement("script"),d=b.getElementsByTagName("script")[0];c.src="//platform.twitter.com/widgets.js",e=!0,d.parentNode.insertBefore(c,d)}}var e;b.addEventListener("lazybeforeunveil",function(a){if(a.detail.instance==c){var b=a.target.getAttribute("data-twitter");b&&(c.aC(a.target,b),d())}})}); |
@@ -1,2 +0,17 @@ | ||
(function(window, document, undefined){ | ||
(function(window, factory) { | ||
var globalInstall = function(){ | ||
factory(window.lazySizes); | ||
window.removeEventListener('lazyunveilread', globalInstall, true); | ||
}; | ||
factory = factory.bind(null, window, window.document); | ||
if(typeof module == 'object' && module.exports){ | ||
factory(require('lazysizes')); | ||
} else if(window.lazySizes) { | ||
globalInstall(); | ||
} else { | ||
window.addEventListener('lazyunveilread', globalInstall, true); | ||
} | ||
}(window, function(window, document, lazySizes) { | ||
'use strict'; | ||
@@ -140,2 +155,2 @@ if(!document.addEventListener){return;} | ||
addEventListener('lazybeforeunveil', init); | ||
})(window, document); | ||
})); |
@@ -1,2 +0,2 @@ | ||
/*! lazysizes - v3.0.0 */ | ||
!function(a,b,c){"use strict";function d(){if(a.lazySizes&&!f){var c=b.documentElement,h=function(){var a,b=function(){j.checkElements(),a=!1};return function(){a||(a=!0,setTimeout(b,999))}}();e=lazySizes.cfg,removeEventListener("lazybeforeunveil",d),"unloadClass"in e||(e.unloadClass="lazyunload"),"unloadedClass"in e||(e.unloadedClass="lazyunloaded"),"unloadHidden"in e||(e.unloadHidden=!0),"emptySrc"in e||(e.emptySrc="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="),"autoUnload"in e||(e.autoUnload=!0),"unloadPixelThreshold"in e||(e.unloadPixelThreshold=6e4),e.autoUnload&&c.addEventListener("load",function(a){a.target.naturalWidth*a.target.naturalHeight>e.unloadPixelThreshold&&a.target.className&&a.target.className.indexOf&&-1!=a.target.className.indexOf(lazySizesConfig.loadingClass)&&-1==a.target.className.indexOf(lazySizesConfig.preloadClass)&&lazySizes.aC(a.target,lazySizesConfig.unloadClass)},!0),lazySizes.unloader=j,g=1.1*(e.expand*e.expFactor+99),f=b.getElementsByClassName([e.unloadClass,e.loadedClass].join(" ")),setInterval(h,9999),addEventListener("lazybeforeunveil",h),addEventListener("lazybeforeunveil",j._reload,!0)}}if(b.addEventListener){var e,f,g,h=[],i=a.requestAnimationFrame||setTimeout,j={checkElements:function(){var a,b,c,d=-1*g,k=d,l=innerHeight+g,m=innerWidth+g;for(a=0,b=f.length;b>a;a++)c=f[a].getBoundingClientRect(),(c.top>l||c.bottom<d||c.left>m||c.right<k||e.unloadHidden&&!c.top&&!c.bottom&&!c.left&&!c.right)&&h.push(f[a]);i(j.unloadElements)},unload:function(a){var b,c,d,f,g=a.parentNode;if(lazySizes.rC(a,e.loadedClass),a.getAttribute(e.srcsetAttr)&&(a.setAttribute("srcset",e.emptySrc),c=!0),g&&"PICTURE"==g.nodeName.toUpperCase()){for(b=g.getElementsByTagName("source"),d=0,f=b.length;f>d;d++)b[d].setAttribute("srcset",e.emptySrc);c=!0}lazySizes.hC(a,e.autosizesClass)&&(lazySizes.rC(a,e.autosizesClass),a.setAttribute(e.sizesAttr,"auto")),(c||a.getAttribute(e.srcAttr))&&(a.src=e.emptySrc),lazySizes.aC(a,e.unloadedClass),lazySizes.aC(a,e.lazyClass),lazySizes.fire(a,"lazyafterunload")},unloadElements:function(a){for(a=Array.isArray(a)?a:h;a.length;)j.unload(a.shift())},_reload:function(a){lazySizes.hC(a.target,e.unloadedClass)&&a.detail&&(a.detail.reloaded=!0,lazySizes.rC(a.target,e.unloadedClass))}};addEventListener("lazybeforeunveil",d)}}(window,document); | ||
/*! lazysizes - v4.0.0-rc1 */ | ||
!function(a,b){var c=function(){b(a.lazySizes),a.removeEventListener("lazyunveilread",c,!0)};b=b.bind(null,a,a.document),"object"==typeof module&&module.exports?b(require("lazysizes")):a.lazySizes?c():a.addEventListener("lazyunveilread",c,!0)}(window,function(a,b,c){"use strict";function d(){if(a.lazySizes&&!f){var h=b.documentElement,i=function(){var a,b=function(){j.checkElements(),a=!1};return function(){a||(a=!0,setTimeout(b,999))}}();e=c.cfg,removeEventListener("lazybeforeunveil",d),"unloadClass"in e||(e.unloadClass="lazyunload"),"unloadedClass"in e||(e.unloadedClass="lazyunloaded"),"unloadHidden"in e||(e.unloadHidden=!0),"emptySrc"in e||(e.emptySrc="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="),"autoUnload"in e||(e.autoUnload=!0),"unloadPixelThreshold"in e||(e.unloadPixelThreshold=6e4),e.autoUnload&&h.addEventListener("load",function(a){a.target.naturalWidth*a.target.naturalHeight>e.unloadPixelThreshold&&a.target.className&&a.target.className.indexOf&&-1!=a.target.className.indexOf(lazySizesConfig.loadingClass)&&-1==a.target.className.indexOf(lazySizesConfig.preloadClass)&&c.aC(a.target,lazySizesConfig.unloadClass)},!0),c.unloader=j,g=1.1*(e.expand*e.expFactor+99),f=b.getElementsByClassName([e.unloadClass,e.loadedClass].join(" ")),setInterval(i,9999),addEventListener("lazybeforeunveil",i),addEventListener("lazybeforeunveil",j._reload,!0)}}if(b.addEventListener){var e,f,g,h=[],i=a.requestAnimationFrame||setTimeout,j={checkElements:function(){var a,b,c,d=-1*g,k=d,l=innerHeight+g,m=innerWidth+g;for(a=0,b=f.length;b>a;a++)c=f[a].getBoundingClientRect(),(c.top>l||c.bottom<d||c.left>m||c.right<k||e.unloadHidden&&!c.top&&!c.bottom&&!c.left&&!c.right)&&h.push(f[a]);i(j.unloadElements)},unload:function(a){var b,d,f,g,h=a.parentNode;if(c.rC(a,e.loadedClass),a.getAttribute(e.srcsetAttr)&&(a.setAttribute("srcset",e.emptySrc),d=!0),h&&"PICTURE"==h.nodeName.toUpperCase()){for(b=h.getElementsByTagName("source"),f=0,g=b.length;g>f;f++)b[f].setAttribute("srcset",e.emptySrc);d=!0}c.hC(a,e.autosizesClass)&&(c.rC(a,e.autosizesClass),a.setAttribute(e.sizesAttr,"auto")),(d||a.getAttribute(e.srcAttr))&&(a.src=e.emptySrc),c.aC(a,e.unloadedClass),c.aC(a,e.lazyClass),c.fire(a,"lazyafterunload")},unloadElements:function(a){for(a=Array.isArray(a)?a:h;a.length;)j.unload(a.shift())},_reload:function(a){c.hC(a.target,e.unloadedClass)&&a.detail&&(a.detail.reloaded=!0,c.rC(a.target,e.unloadedClass))}};addEventListener("lazybeforeunveil",d)}}); |
@@ -1,10 +0,10 @@ | ||
#lazysizes unload | ||
# lazysizes unload | ||
Unloads ``img.lazyload`` (including ``picture``) elements if they consume a lot of memory and they are out of view. To improve memory consumption as also resize/orientationchange performance. | ||
##Usage | ||
## Usage | ||
Simply add the lazysizes unload extension to your site. | ||
##Options | ||
## Options | ||
@@ -20,3 +20,3 @@ * ``lazySizesConfig.unloadClass`` (default: ``"lazyunload"``): Elements with this class will be unloaded even if they only consume less memory/pixels than defined in ``unloadPixelThreshold``. | ||
##Events | ||
## Events | ||
@@ -23,0 +23,0 @@ * ``lazyafterunload``: This event will be fired on the unloaded lazyload elements. This event can be used to extend the unload functionality. |
@@ -25,3 +25,18 @@ /* | ||
(function(window, document){ | ||
(function(window, factory) { | ||
var globalInstall = function(){ | ||
factory(window.lazySizes); | ||
window.removeEventListener('lazyunveilread', globalInstall, true); | ||
}; | ||
factory = factory.bind(null, window, window.document); | ||
if(typeof module == 'object' && module.exports){ | ||
factory(require('lazysizes')); | ||
} else if(window.lazySizes) { | ||
globalInstall(); | ||
} else { | ||
window.addEventListener('lazyunveilread', globalInstall, true); | ||
} | ||
}(window, function(window, document, lazySizes) { | ||
/*jshint eqnull:true */ | ||
@@ -53,2 +68,4 @@ 'use strict'; | ||
addEventListener('lazybeforeunveil', function(e){ | ||
if(e.detail.instance != lazySizes){return;} | ||
var tmp, load, bg, poster; | ||
@@ -130,2 +147,2 @@ if(!e.defaultPrevented) { | ||
} | ||
})(window, document); | ||
})); |
@@ -1,2 +0,2 @@ | ||
/*! lazysizes - v3.0.0 */ | ||
!function(a,b){"use strict";function c(a,c){if(!f[a]){var d=b.createElement(c?"link":"script"),e=b.getElementsByTagName("script")[0];c?(d.rel="stylesheet",d.href=a):d.src=a,f[a]=!0,f[d.src||d.href]=!0,e.parentNode.insertBefore(d,e)}}var d,e,f={};b.addEventListener&&(e=/\(|\)|\s|'/,d=function(a,c){var d=b.createElement("img");d.onload=function(){d.onload=null,d.onerror=null,d=null,c()},d.onerror=d.onload,d.src=a,d&&d.complete&&d.onload&&d.onload()},addEventListener("lazybeforeunveil",function(a){var b,f,g,h;a.defaultPrevented||("none"==a.target.preload&&(a.target.preload="auto"),b=a.target.getAttribute("data-link"),b&&c(b,!0),b=a.target.getAttribute("data-script"),b&&c(b),b=a.target.getAttribute("data-require"),b&&(lazySizes.cfg.requireJs?lazySizes.cfg.requireJs([b]):c(b)),g=a.target.getAttribute("data-bg"),g&&(a.detail.firesLoad=!0,f=function(){a.target.style.backgroundImage="url("+(e.test(g)?JSON.stringify(g):g)+")",a.detail.firesLoad=!1,lazySizes.fire(a.target,"_lazyloaded",{},!0,!0)},d(g,f)),h=a.target.getAttribute("data-poster"),h&&(a.detail.firesLoad=!0,f=function(){a.target.poster=h,a.detail.firesLoad=!1,lazySizes.fire(a.target,"_lazyloaded",{},!0,!0)},d(h,f)))},!1))}(window,document); | ||
/*! lazysizes - v4.0.0-rc1 */ | ||
!function(a,b){var c=function(){b(a.lazySizes),a.removeEventListener("lazyunveilread",c,!0)};b=b.bind(null,a,a.document),"object"==typeof module&&module.exports?b(require("lazysizes")):a.lazySizes?c():a.addEventListener("lazyunveilread",c,!0)}(window,function(a,b,c){"use strict";function d(a,c){if(!g[a]){var d=b.createElement(c?"link":"script"),e=b.getElementsByTagName("script")[0];c?(d.rel="stylesheet",d.href=a):d.src=a,g[a]=!0,g[d.src||d.href]=!0,e.parentNode.insertBefore(d,e)}}var e,f,g={};b.addEventListener&&(f=/\(|\)|\s|'/,e=function(a,c){var d=b.createElement("img");d.onload=function(){d.onload=null,d.onerror=null,d=null,c()},d.onerror=d.onload,d.src=a,d&&d.complete&&d.onload&&d.onload()},addEventListener("lazybeforeunveil",function(a){if(a.detail.instance==c){var b,g,h,i;a.defaultPrevented||("none"==a.target.preload&&(a.target.preload="auto"),b=a.target.getAttribute("data-link"),b&&d(b,!0),b=a.target.getAttribute("data-script"),b&&d(b),b=a.target.getAttribute("data-require"),b&&(c.cfg.requireJs?c.cfg.requireJs([b]):d(b)),h=a.target.getAttribute("data-bg"),h&&(a.detail.firesLoad=!0,g=function(){a.target.style.backgroundImage="url("+(f.test(h)?JSON.stringify(h):h)+")",a.detail.firesLoad=!1,c.fire(a.target,"_lazyloaded",{},!0,!0)},e(h,g)),i=a.target.getAttribute("data-poster"),i&&(a.detail.firesLoad=!0,g=function(){a.target.poster=i,a.detail.firesLoad=!1,c.fire(a.target,"_lazyloaded",{},!0,!0)},e(i,g)))}},!1))}); |
@@ -1,2 +0,2 @@ | ||
#lazysizes unveilhooks extension | ||
# lazysizes unveilhooks extension | ||
@@ -3,0 +3,0 @@ The unveilhooks plugin extends lazySizes to also unveil / lazyload scripts/widgets, background images, styles and video/audio elements: |
@@ -1,2 +0,17 @@ | ||
(function(window, document){ | ||
(function(window, factory) { | ||
var globalInstall = function(){ | ||
factory(window.lazySizes); | ||
window.removeEventListener('lazyunveilread', globalInstall, true); | ||
}; | ||
factory = factory.bind(null, window, window.document); | ||
if(typeof module == 'object' && module.exports){ | ||
factory(require('lazysizes')); | ||
} else if(window.lazySizes) { | ||
globalInstall(); | ||
} else { | ||
window.addEventListener('lazyunveilread', globalInstall, true); | ||
} | ||
}(window, function(window, document, lazySizes) { | ||
/*jshint eqnull:true */ | ||
@@ -86,2 +101,4 @@ 'use strict'; | ||
document.addEventListener('lazybeforeunveil', function(e){ | ||
if(e.detail.instance != lazySizes){return;} | ||
var elem = e.target; | ||
@@ -98,2 +115,2 @@ var youtube = elem.getAttribute('data-youtube'); | ||
}); | ||
})(window, document); | ||
})); |
@@ -1,2 +0,2 @@ | ||
/*! lazysizes - v3.0.0 */ | ||
!function(a,b){"use strict";function c(c,d){var e="vimeoCallback"+i,f=b.createElement("script");c+="&callback="+e,i++,a[e]=function(b){f.parentNode.removeChild(f),delete a[e],d(b)},f.src=c,b.head.appendChild(f)}function d(a,b){c(n.replace(j,a),function(a){a&&a.thumbnail_url&&(b.style.backgroundImage="url("+a.thumbnail_url+")")}),b.addEventListener("click",e)}function e(a){var b=a.currentTarget,c=b.getAttribute("data-vimeo"),d=b.getAttribute("data-vimeoparams")||"";d&&!k.test(d)&&(d="&"+d),a.preventDefault(),b.innerHTML='<iframe src="'+o.replace(j,c)+d+'" frameborder="0" allowfullscreen="" width="640" height="390"></iframe>',b.removeEventListener("click",e)}function f(a,b){b.style.backgroundImage="url("+l.replace(j,a)+")",b.addEventListener("click",g)}function g(a){var b=a.currentTarget,c=b.getAttribute("data-youtube"),d=b.getAttribute("data-ytparams")||"";d&&!k.test(d)&&(d="&"+d),a.preventDefault(),b.innerHTML='<iframe src="'+m.replace(j,c)+d+'" frameborder="0" allowfullscreen="" width="640" height="390"></iframe>',b.removeEventListener("click",g)}if(b.getElementsByClassName){var h="https:"==location.protocol?"https:":"http:",i=Date.now(),j=/\{\{id}}/,k=/^&/,l=h+"//img.youtube.com/vi/{{id}}/sddefault.jpg",m=h+"//www.youtube.com/embed/{{id}}?autoplay=1",n=h+"//vimeo.com/api/oembed.json?url=https%3A//vimeo.com/{{id}}",o=h+"//player.vimeo.com/video/{{id}}?autoplay=1";b.addEventListener("lazybeforeunveil",function(a){var b=a.target,c=b.getAttribute("data-youtube"),e=b.getAttribute("data-vimeo");c&&b&&f(c,b),e&&b&&d(e,b)})}}(window,document); | ||
/*! lazysizes - v4.0.0-rc1 */ | ||
!function(a,b){var c=function(){b(a.lazySizes),a.removeEventListener("lazyunveilread",c,!0)};b=b.bind(null,a,a.document),"object"==typeof module&&module.exports?b(require("lazysizes")):a.lazySizes?c():a.addEventListener("lazyunveilread",c,!0)}(window,function(a,b,c){"use strict";function d(c,d){var e="vimeoCallback"+j,f=b.createElement("script");c+="&callback="+e,j++,a[e]=function(b){f.parentNode.removeChild(f),delete a[e],d(b)},f.src=c,b.head.appendChild(f)}function e(a,b){d(o.replace(k,a),function(a){a&&a.thumbnail_url&&(b.style.backgroundImage="url("+a.thumbnail_url+")")}),b.addEventListener("click",f)}function f(a){var b=a.currentTarget,c=b.getAttribute("data-vimeo"),d=b.getAttribute("data-vimeoparams")||"";d&&!l.test(d)&&(d="&"+d),a.preventDefault(),b.innerHTML='<iframe src="'+p.replace(k,c)+d+'" frameborder="0" allowfullscreen="" width="640" height="390"></iframe>',b.removeEventListener("click",f)}function g(a,b){b.style.backgroundImage="url("+m.replace(k,a)+")",b.addEventListener("click",h)}function h(a){var b=a.currentTarget,c=b.getAttribute("data-youtube"),d=b.getAttribute("data-ytparams")||"";d&&!l.test(d)&&(d="&"+d),a.preventDefault(),b.innerHTML='<iframe src="'+n.replace(k,c)+d+'" frameborder="0" allowfullscreen="" width="640" height="390"></iframe>',b.removeEventListener("click",h)}if(b.getElementsByClassName){var i="https:"==location.protocol?"https:":"http:",j=Date.now(),k=/\{\{id}}/,l=/^&/,m=i+"//img.youtube.com/vi/{{id}}/sddefault.jpg",n=i+"//www.youtube.com/embed/{{id}}?autoplay=1",o=i+"//vimeo.com/api/oembed.json?url=https%3A//vimeo.com/{{id}}",p=i+"//player.vimeo.com/video/{{id}}?autoplay=1";b.addEventListener("lazybeforeunveil",function(a){if(a.detail.instance==c){var b=a.target,d=b.getAttribute("data-youtube"),f=b.getAttribute("data-vimeo");d&&b&&g(d,b),f&&b&&e(f,b)}})}}); |
@@ -1,2 +0,2 @@ | ||
#lazysizes | ||
# lazysizes | ||
@@ -7,3 +7,3 @@ **lazysizes** is a fast (jank-free), SEO-friendly and self-initializing lazyloader for images (including responsive images ``picture``/``srcset``), iframes, scripts/widgets and much more. It also prioritizes resources by differentiating between crucial in view and near view elements to make perceived performance even faster. | ||
##How to | ||
## How to | ||
@@ -23,2 +23,3 @@ 1. Download the [lazysizes.min.js script](http://afarkas.github.io/lazysizes/lazysizes.min.js) and include **lazysizes** in your webpage. (Or install via npm: ``npm install lazysizes --save`` or bower ``bower install lazysizes --save``) | ||
``` | ||
```html | ||
@@ -33,2 +34,3 @@ <!-- responsive example with automatic sizes calculation: --> | ||
``` | ||
```html | ||
@@ -44,10 +46,10 @@ <!-- iframe example --> | ||
##[Demo with code examples](http://afarkas.github.io/lazysizes/#examples) | ||
## [Demo with code examples](http://afarkas.github.io/lazysizes/#examples) | ||
Can be seen [here](http://afarkas.github.io/lazysizes/#examples) | ||
##Responsive image support (picture and/or srcset) | ||
## Responsive image support (picture and/or srcset) | ||
Lazysizes is built upon the Responsive image standard and extends it with additional functionality. For full cross browser responsive image support you must use either a full polyfill like [picturefill](https://github.com/scottjehl/picturefill) or use the extreme lightweight partial [respimg polyfill plugin](plugins/respimg) or the [responsive image on demand plugin](plugins/rias). Alternatively you can simply define a fallback src via the ``data-src`` attribute. If you want to learn more about the responsive image syntax read "[The anatomy of responsive images](https://jakearchibald.com/2015/anatomy-of-responsive-images/)". | ||
##What makes lazysizes so awesome: | ||
## What makes lazysizes so awesome: | ||
**lazysizes** is different than other lazy image loaders. | ||
@@ -64,6 +66,6 @@ | ||
##More about the API | ||
## More about the API | ||
**lazysizes** comes with a simple markup and JS API. Normally you will only need to use the markup API. | ||
###Markup API | ||
### Markup API | ||
Add the ``class`` ``lazyload`` to all ``img`` and ``iframe`` elements, which should be loaded lazy. *Instead* of a ``src`` or ``srcset`` attribute use a ``data-src`` or ``data-srcset`` attribute: | ||
@@ -94,7 +96,7 @@ | ||
##Recommended/possible markup patterns | ||
## Recommended/possible markup patterns | ||
lazysizes allows you to write an endless variety of different markup patterns. Find your own/best pattern or choose one of the following. (All of the following patterns can be also used for art direction using the ``picture`` element.) | ||
###Simple pattern | ||
### Simple pattern | ||
@@ -124,3 +126,3 @@ Add the class ``lazyload`` and simply omit the ``src`` attribute or add a data uri as fallback ``src``. | ||
###Combine ``data-srcset`` with ``data-src`` | ||
### Combine ``data-srcset`` with ``data-src`` | ||
@@ -144,3 +146,3 @@ In case you want to use responsive images for supporting browsers, but don't want to include a polyfill, simply combine your ``data-srcset`` with a ``data-src`` attribute. | ||
###LQIP/blurry image placeholder/Blur up image technique | ||
### LQIP/blurry image placeholder/Blur up image technique | ||
If you are using the LQIP (Low Quality Image Placeholder) pattern, simply add a low quality image as the ``src``: | ||
@@ -201,3 +203,3 @@ | ||
###modern transparent ``srcset`` pattern | ||
### modern transparent ``srcset`` pattern | ||
@@ -220,3 +222,3 @@ Combine a normal ``src`` attribute with a transparent or low quality image as ``srcset`` value and a ``data-srcset`` attribute. This way modern browsers will lazy load without loading the ``src`` attribute and all others will simply fallback to the initial ``src`` attribute (without lazyload). (This nice pattern originated from @ivopetkov.) | ||
###The noscript pattern | ||
### The noscript pattern | ||
@@ -241,3 +243,3 @@ In case disabled JavaScript is a concern you can combine this simple pattern with an image inside a ``noscript`` element. | ||
###[data-expand] attribute | ||
### [data-expand] attribute | ||
Normally lazysizes will expand the viewport area to lazy preload images/iframes which might become visible soon. This value can be adjusted using the ``expand`` option. | ||
@@ -269,3 +271,3 @@ | ||
###CSS API | ||
### CSS API | ||
lazysizes adds the class ``lazyloading`` while the images are loading and the class ``lazyloaded`` as soon as the image is loaded. This can be used to add unveil effects: | ||
@@ -300,6 +302,6 @@ | ||
###JS API | ||
### JS API | ||
**lazysizes** automatically detects new elements with the class ``lazyload`` so you won't need to call or configure anything in most situations. | ||
####JS API - options | ||
#### JS API - options | ||
Options can be set by declaring a global configuration option object named ``lazySizesConfig``. This object must be defined before the lazysizes script. A basic example: | ||
@@ -333,2 +335,3 @@ | ||
* ``lazySizesConfig.customMedia`` (default: ``{}``): The ``customMedia`` option object is an alias map for different media queries. It can be used to separate/centralize your multiple specific media queries implementation (layout) from the ``source[media]`` attribute (content/structure) by creating labeled media queries. (See also the [custommedia extension](plugins/custommedia)). | ||
* ``lazySizesConfig.loadHidden`` (default: ``true``): Wether to load `visibility: hidden` elements. | ||
```html | ||
@@ -371,3 +374,3 @@ <script> | ||
####JS API - events | ||
#### JS API - events | ||
**lazysizes** provides two events to modify or extend the behavior of **lazysizes**. | ||
@@ -432,4 +435,4 @@ | ||
####JS API - methods | ||
#####``lazySizes.loader.unveil(DOMNode)`` | ||
#### JS API - methods | ||
##### ``lazySizes.loader.unveil(DOMNode)`` | ||
@@ -444,3 +447,3 @@ In case a developer wants to show an image even if it is not inside the viewport the ``lazySizes.loader.unveil(DOMNode)`` can be called: | ||
#####``lazySizes.autoSizer.checkElems()`` | ||
##### ``lazySizes.autoSizer.checkElems()`` | ||
@@ -453,7 +456,7 @@ In case one or more image elements with the attribute ``data-sizes="auto"`` have changed in size ``lazySizes.autoSizer.updateElems`` can be called (For example to implement element queries): | ||
#####``lazySizes.loader.checkElems()`` | ||
##### ``lazySizes.loader.checkElems()`` | ||
Tests whether new elements has came into view. Normally this method only needs to be called, if ``lazySizesConfig.loadMode`` was set to ``0``. | ||
#####``lazySizes.init()`` | ||
##### ``lazySizes.init()`` | ||
@@ -475,34 +478,34 @@ LazySizes initializes itself automatically. In case you set ``lazySizesConfig.init`` to ``false`` you need to explicitly call ``lazySizes.init()``. Note: You can speed up initial loading of in view images if you call `lazySizesConfig.init()` explicitly after lazysizes and all plugins are loaded. | ||
##Browser Support | ||
## Browser Support | ||
**lazysizes** supports all browsers, that support [``document.getElementsByClassName``](http://caniuse.com/#feat=getelementsbyclassname) (== all browsers but not IE8-). In case you need to support IE8, see also the [noscript extension](plugins/noscript/README.md#ie8) (or use a modified noscript pattern or the LQIP pattern). | ||
##Contributing | ||
## Contributing | ||
Fixes, PRs and issues are always welcome, make sure to create a new branch from the **master** (not the gh-pages branch), validate against JSHint and test in all browsers. In case of an API/documentation change make sure to also document it here in the readme.md. | ||
##<a name="plugins"></a>Available plugins in this repo | ||
## <a name="plugins"></a>Available plugins in this repo | ||
It is recommended to concat all plugins together with lazySizes. In case you don't concat it is recommended to include the plugin scripts *before* the lazySizes main script. | ||
###[respimg polyfill plugin](plugins/respimg) | ||
### [respimg polyfill plugin](plugins/respimg) | ||
The respimg polyfill plugin is an extremely lightweight alternate polyfill for the most important subsets of responsive images (srcset and picture). | ||
###[OPTIMUMX plugin](plugins/optimumx) | ||
### [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 (for example 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. | ||
###[object-fit extension](plugins/object-fit) | ||
### [object-fit extension](plugins/object-fit) | ||
The [object fit plugin](plugins/object-fit) polyfills the `object-fit` and the `object-position` property in non supporting browsers. | ||
###[unveilhooks plugin](plugins/unveilhooks) | ||
### [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) | ||
### [include plugin](plugins/include) | ||
The [include plugin](plugins/include) plugin enables lazySizes to lazyload content, styles or AMD modules either simply postponed or conditionally (for example matching certain media queries). This extension also heavily simplifies the architecture of conditional, dynamically changing responsive behavior and has great scalability. | ||
###[bgset plugin - lazy responsive background-image](plugins/bgset) | ||
### [bgset plugin - lazy responsive background-image](plugins/bgset) | ||
The bgset plugin allows lazyloading of multiple background images with different resolutions/sizes and/or media queries (responsive background images). In case you only need one image use the unveilhooks extension. | ||
###[lazysizes custommedia extension](plugins/custommedia) | ||
### [lazysizes custommedia extension](plugins/custommedia) | ||
[lazySizes custommedia extension](plugins/custommedia) allows you to automatically sync and manage your breakpoints between your CSS and the ``media`` attributes of your ``"picture > source"`` elements using the ``customMedia`` option of lazySizes. | ||
###[attrchange / re-initialization extension](plugins/attrchange) | ||
### [attrchange / re-initialization extension](plugins/attrchange) | ||
In case you are changing the ``data-src``/``data-srcset`` attributes of already transformed lazyload elements, you must normally also re-add the ``lazyload`` class to the element. | ||
@@ -512,21 +515,21 @@ | ||
###[parent-fit extension](plugins/parent-fit) | ||
### [parent-fit extension](plugins/parent-fit) | ||
The [parent fit plugin](plugins/parent-fit) extends the ``data-sizes="auto"`` feature to also calculate the right ``sizes`` for ``object-fit: contain|cover`` image elements and other **height** ( and width) constrained image elements in general. | ||
###[unload extension](plugins/unload) | ||
### [unload extension](plugins/unload) | ||
The [unload](plugins/unload) extends lazysizes to unload not in view images to improve memory consumption and orientationchange/resize performance. | ||
###[noscript extension](plugins/noscript) | ||
### [noscript extension](plugins/noscript) | ||
The [noscript extension](plugins/noscript) is the ultimate progressive enhancement extension for lazySizes. It allows you to transform any HTML inside a ``noscript`` element as soon as it becomes visible. | ||
###[aspectratio extension](plugins/aspectratio) | ||
### [aspectratio extension](plugins/aspectratio) | ||
The [aspectratio extension](plugins/aspectratio) allows you to control the aspectratio of your images using markup instead of CSS. It is an alternative for the [CSS intrinsic ratio technique](#specify-dimensions). | ||
###[print plugin](plugins/print) | ||
### [print plugin](plugins/print) | ||
The [print plugin](plugins/print) plugin enables lazySizes to unveil all elements as soon as the user starts to print. (Or set ``lazySizesConfig.preloadAfterLoad`` to ``true``). | ||
###[progressive plugin](plugins/progressive) | ||
### [progressive plugin](plugins/progressive) | ||
The [progressive plugin](plugins/progressive) adds better support for rendering progressive jpgs/pngs. | ||
###[RIaS plugin - (Responsive Images as a Service / Responsive image on demand)](plugins/rias) | ||
### [RIaS plugin - (Responsive Images as a Service / Responsive image on demand)](plugins/rias) | ||
The [RIaS plugin is a neat full responsive images solution](plugins/rias) without the need of any additional plugins/polyfills. | ||
@@ -537,3 +540,3 @@ | ||
##<a name="specify-dimensions"></a>Tip: Specifying image dimensions (minimizing reflows and avoiding page jumps) | ||
## <a name="specify-dimensions"></a>Tip: Specifying image dimensions (minimizing reflows and avoiding page jumps) | ||
To minimize reflows, content jumping or unpredictable behavior with some other JS widgets (isotope, masonry, some sliders/carousels...) the width **and** the height of an image should be calculable by the browser before the image source itself is loaded. For "static" images this can be done using either CSS or using the content attributes: | ||
@@ -682,3 +685,3 @@ | ||
###Updating layout of JS widgets | ||
### Updating layout of JS widgets | ||
In case you can't specify the image dimensions using CSS or one of the above suggested methods and your JS widgets have problems to calculate the right dimensions. You can use the following pattern to update your JS widgets (sliders/masonry): | ||
@@ -703,3 +706,3 @@ | ||
##<a id="include-early"></a>Tip: Where/How to include lazySizes | ||
## <a id="include-early"></a>Tip: Where/How to include lazySizes | ||
While lazy loading is a great feature, it is important for users that crucial in view images are loaded as fast as possible. (Most users start to interact with a page after in view images are loaded.) | ||
@@ -711,3 +714,3 @@ | ||
##Why lazysizes | ||
## Why lazysizes | ||
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 fulfill two purposes runtime and memory efficiency. And looking into the source code of most so called lazy loaders often also unveils lazy developers... | ||
@@ -714,0 +717,0 @@ |
@@ -6,3 +6,3 @@ function l(window, document) { | ||
var lazySizesConfig; | ||
var lazysizes, lazySizesConfig; | ||
@@ -68,4 +68,10 @@ var docElem = document.documentElement; | ||
event.initCustomEvent(name, !noBubbles, !noCancelable, detail || {}); | ||
if(!detail){ | ||
detail = {}; | ||
} | ||
detail.instance = lazysizes; | ||
event.initCustomEvent(name, !noBubbles, !noCancelable, detail); | ||
elem.dispatchEvent(event); | ||
@@ -336,2 +342,3 @@ return event; | ||
(eLbottom || eLright || eLleft || eLtop) && | ||
(lazySizesConfig.loadHidden || getCSS(lazyloadElems[i], 'visibility') != 'hidden') && | ||
((isCompleted && isLoading < 3 && !elemExpandVal && (loadMode < 3 || lowRuns < 4)) || isNestedVisible(lazyloadElems[i], elemExpand))){ | ||
@@ -376,3 +383,3 @@ unveilElement(lazyloadElems[i]); | ||
var handleSources = function(source){ | ||
var customMedia, parent; | ||
var customMedia; | ||
@@ -388,9 +395,2 @@ var sourceSrcset = source[_getAttribute](lazySizesConfig.srcsetAttr); | ||
} | ||
//https://bugzilla.mozilla.org/show_bug.cgi?id=1170572 | ||
if(customMedia){ | ||
parent = source.parentNode; | ||
parent.insertBefore(source.cloneNode(), source); | ||
parent.removeChild(source); | ||
} | ||
}; | ||
@@ -446,3 +446,3 @@ | ||
if(srcset || isPicture){ | ||
if(isImg && (srcset || isPicture)){ | ||
updatePolyfill(elem, {src: src}); | ||
@@ -656,3 +656,4 @@ } | ||
hFac: 0.8, | ||
loadMode: 2 | ||
loadMode: 2, | ||
loadHidden: true, | ||
}; | ||
@@ -677,3 +678,3 @@ | ||
return { | ||
lazysizes = { | ||
cfg: lazySizesConfig, | ||
@@ -691,2 +692,4 @@ autoSizer: autoSizer, | ||
}; | ||
return lazysizes; | ||
} |
(function(window, factory) { | ||
var lazySizes = factory(window, window.document); | ||
window.lazySizes = lazySizes; | ||
if(typeof module == 'object' && module.exports){ | ||
module.exports = lazySizes; | ||
} else { | ||
window.lazySizes = factory(window, window.document); | ||
} | ||
@@ -7,0 +7,0 @@ }(window, function l(window, document) { |
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Minified code
QualityThis 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
No v1
QualityPackage is not semver >=1. This means it is not stable and does not support ^ ranges.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
308190
69
4852
716
22