diff --git a/README.md b/README.md index f5ab0115..ed69572f 100644 --- a/README.md +++ b/README.md @@ -176,7 +176,7 @@ Here the list of options: * ``lazySizesConfig.addClasses`` (default: ``true``): Wether lazysizes should add loading and loaded classes. This can be used to add unveil effects or to apply new styles (background-image). * ``lazySizesConfig.loadingClass`` (default: ``"lazyloading"``): If ``addClasses`` is set to ``true`` this ``class`` will be added to ``img`` element as soon as image loading starts. Can be used to add unveil effects. * ``lazySizesConfig.loadedClass`` (default: ``"lazyloaded"``): If ``addClasses`` is set to ``true`` this ``class`` will be added to any element as soon as the image is loaded or the image comes into view. Can be used to add unveil effects or to apply styles. -* ``lazySizesConfig.expand`` (default: ``150``): The ``expand`` option expands the calculated visual viewport area in all directions, so that elements can be loaded before they are becoming visible. (Note: Reasonable values are between ``30`` and ``200``.) In case you have a lot of small images or you are using the LQIP pattern you can lower the value, in case you have larger images set it to a higher value. Also note, that lazySizes will dynamically shrink this value to ``0``, if the browser is currently downloading and expand it (by multiplying the ``expand`` option with ``3.5``) if the browser network is currently idling. This option can be overridden with the ``[data-expand]`` attribute. +* ``lazySizesConfig.expand`` (default: ``120``): The ``expand`` option expands the calculated visual viewport area in all directions, so that elements can be loaded before they are becoming visible. (Note: Reasonable values are between ``20`` and ``180``.) In case you have a lot of small images or you are using the LQIP pattern you can lower the value, in case you have larger images set it to a higher value. Also note, that lazySizes will dynamically shrink this value to ``0``, if the browser is currently downloading and expand it (by multiplying the ``expand`` option with ``3.5``) if the browser network is currently idling. This option can be overridden with the ``[data-expand]`` attribute. * ``lazySizesConfig.minSize`` (default: ``50``): For ``data-sizes="auto"`` feature. The minimum size of an image that is used to calculate the ``sizes`` attribute. In case it is under ``minSize`` the script traverses up the DOM tree until it finds a parent that is over ``minSize``. * ``lazySizesConfig.srcAttr`` (default: ``"data-src"``): The attribute, which should be transformed to ``src``. * ``lazySizesConfig.srcset`` (default: ``"data-srcset"``): The attribute, which should be transformed to ``srcset``. diff --git a/lazysizes.js b/lazysizes.js index b2e0d70b..df31288c 100644 --- a/lazysizes.js +++ b/lazysizes.js @@ -108,7 +108,7 @@ } }; - document.addEventListener("visibilitychange", handleVisibility); + document.addEventListener('visibilitychange', handleVisibility); handleVisibility(); return function(force){ @@ -126,7 +126,7 @@ var ua = navigator.userAgent; var fixChrome = window.HTMLPictureElement && ua.match(/hrome\/(\d+)/) && (RegExp.$1 == 40); - var supportNativeLQIP = (/blink|webkit/i).test(ua); + var supportNativeLQIP = (/webkit/i).test(ua); var regImg = /^img$/i; var regIframe = /^iframe$/i; @@ -359,7 +359,7 @@ addClass(elem, lazySizesConfig.autosizesClass); } - if(srcset || sizes || isPicture){ + if(srcset || isPicture){ updatePolyfill(elem, {srcset: srcset, src: src}); } @@ -368,10 +368,10 @@ //remove curSrc == (elem.currentSrc || elem.src) it's a workaround for FF. see: https://bugzilla.mozilla.org/show_bug.cgi?id=608261 if( !firesLoad || (elem.complete && curSrc == (elem.currentSrc || elem.src)) ){ if(firesLoad){ - resetPreloading({target: elem}); + resetPreloading(event); } if(lazySizesConfig.addClasses){ - switchLoadingClass({target: elem}); + switchLoadingClass(event); } } elem = null; @@ -381,8 +381,8 @@ var calcExpand = function(){ if(isPreloadAllowed && !isExpandCalculated){ - defaultExpand = Math.max( Math.min(lazySizesConfig.expand || lazySizesConfig.threshold || 150, 300), 9 ); - preloadExpand = Math.min( defaultExpand * 4, Math.max(innerHeight * 1.1, docElem.clientHeight, defaultExpand * 3) ); + defaultExpand = Math.max( Math.min(lazySizesConfig.expand || lazySizesConfig.threshold || 120, 300), 9 ); + preloadExpand = defaultExpand * 4; } isExpandCalculated = true; diff --git a/lazysizes.min.js b/lazysizes.min.js index 850aed21..d1ca38f0 100644 --- a/lazysizes.min.js +++ b/lazysizes.min.js @@ -1,3 +1,3 @@ /*! lazysizes - v0.9.0-RC1 - 2015-01-28 Licensed MIT */ -!function(a,b){a.lazySizes=b(a,a.document),"function"==typeof define&&define.amd&&define(a.lazySizes)}(window,function(a,b){"use strict";if(b.getElementsByClassName){var c,d=b.documentElement,e=/^picture$/i,f=["load","error","lazyincluded","_lazyloaded"],g=function(a,b){var c=new RegExp("(\\s|^)"+b+"(\\s|$)");return a.className.match(c)&&c},h=function(a,b){g(a,b)||(a.className+=" "+b)},i=function(a,b){var c;(c=g(a,b))&&(a.className=a.className.replace(c," "))},j=function(a,b,c){var d=c?"addEventListener":"removeEventListener";c&&j(a,b),f.forEach(function(c){a[d](c,b)})},k=function(a,c,d){var e=b.createEvent("Event");return e.initEvent(c,!0,!0),e.details=d||{},a.dispatchEvent(e),e},l=function(b,c){var d,e;a.HTMLPictureElement||(a.picturefill?picturefill({reevaluate:!0,reparse:!0,elements:[b]}):a.respimage?(c&&(e=c.srcset&&"srcset"||c.src&&"src")&&(d=b[respimage._.ns],d&&d[e]!=c[e]&&b.getAttribute(e)==c[e]&&(d[e]=void 0)),respimage({reparse:!0,elements:[b]})):c&&c.src&&(b.src=c.src))},m=function(a,b){return getComputedStyle(a,null)[b]},n=function(a,d){for(var e=a.offsetWidth;eK||!a.target)&&(K=0)},N=function(a,c){var e,f=a,g="hidden"!=m(a,"visibility");for(v-=c,y+=c,w-=c,x+=c;g&&(f=f.offsetParent)&&f!=d&&f!=b.body;)g=p&&4>K||(m(f,"opacity")||1)>0,g&&"visible"!=m(f,"overflow")&&(e=f.getBoundingClientRect(),g=x>e.left-1&&we.top-1&&vm&&f[m];m++,L++)if((i=f[m].getAttribute("data-expand"))&&(e=1*i)||(e=H),!(K>6&&(!i||"src"in f[m])))if(K>3&&e>E&&(e=E),j!==e&&(t=innerWidth+e,u=innerHeight+e,h=-1*e,j=e),a=f[m].getBoundingClientRect(),(y=a.bottom)>=h&&(v=a.top)<=u&&(x=a.right)>=h&&(w=a.left)<=t&&(y||x||w||v)&&(p&&H==F&&3>K&&4>J&&!i||N(f[m],e)))L--,l+=2,S(f[m]),d=!0;else{if(!s&&Date.now()-l>3)return L++,s=!0,void P();!d&&p&&!b&&3>K&&4>J&&(g[0]||c.preloadAfterLoad)&&(g[0]||!i&&(y||x||w||v||"auto"!=f[m].getAttribute(c.sizesAttr)))&&(b=g[0]||f[m])}L=0,s=!1,J++,G>H&&2>K&&J>4?(H=G,J=0,P()):H!=F&&(H=F),b&&!d&&S(b)}},P=o(O),Q=function(a){h(a.target,c.loadedClass),i(a.target,c.loadingClass),j(a.target,Q)},R=function(a,b){try{a.contentWindow.location.replace(b)}catch(c){a.setAttribute("src",b)}},S=function(a,b){var d,f,g,m,n,o,s,t,u,v,w,x,y=a.currentSrc||a.src,z=C.test(a.nodeName);if(B||p||!z||!y||a.complete){if(!(v=k(a,"lazybeforeunveil",{force:!!b})).defaultPrevented){if(n=a.getAttribute(c.sizesAttr)||a.getAttribute("sizes"),n&&("auto"==n?q.updateElem(a,!0):a.setAttribute("sizes",n)),s=a.getAttribute(c.srcsetAttr),o=a.getAttribute(c.srcAttr),w=v.details.firesLoad||"src"in a&&(s||o),w&&(K++,j(a,M,!0),clearTimeout(r),r=setTimeout(M,3e3),z&&(t=a.parentNode,u=e.test(t.nodeName||""))),s||o){if(u)for(d=t.getElementsByTagName("source"),f=0,g=d.length;g>f;f++)(x=c.customMedia[d[f].getAttribute("media")])&&d[f].setAttribute("media",x),m=d[f].getAttribute(c.srcsetAttr),m&&d[f].setAttribute("srcset",m);s?(a.setAttribute("srcset",s),A&&n&&a.removeAttribute("src")):o&&(D.test(a.nodeName)?R(a,o):a.setAttribute("src",o))}c.addClasses&&(h(a,c.loadingClass),j(a,Q,!0))}setTimeout(function(){"auto"==n&&h(a,c.autosizesClass),(s||n||u)&&l(a,{srcset:s,src:o}),i(a,c.lazyClass),(!w||a.complete&&y==(a.currentSrc||a.src))&&(w&&M({target:a}),c.addClasses&&Q({target:a})),a=null})}},T=function(){n&&!I&&(F=Math.max(Math.min(c.expand||c.threshold||150,300),9),G=Math.min(4*F,Math.max(1.1*innerHeight,d.clientHeight,3*F))),I=!0},U=function(){n=!0,I=!1},V=function(){p=!0,U(),P(!0)},W=function(){f=b.getElementsByClassName(c.lazyClass),g=b.getElementsByClassName(c.lazyClass+" "+c.preloadClass),c.scroll&&addEventListener("scroll",P,!0),addEventListener("resize",function(){I=!1,P()}),a.MutationObserver?new MutationObserver(P).observe(d,{childList:!0,subtree:!0,attributes:!0}):(d.addEventListener("DOMNodeInserted",P,!0),d.addEventListener("DOMAttrModified",P,!0)),addEventListener("hashchange",P,!0),["transitionstart","transitionend","load","focus","mouseover","animationend","click"].forEach(function(a){b.addEventListener(a,P,!0)}),(p=/d$|^c/.test(b.readyState))||(addEventListener("load",V),b.addEventListener("DOMContentLoaded",P)),setTimeout(U,666),P()};return{init:W,checkElems:P,unveil:S}}(),q=function(){var a,d=function(a,b){var c,d,f,g,h,i=a.parentNode;if(i&&(c=n(a,i),h=k(a,"lazybeforesizes",{width:c,dataAttr:!!b}),!h.defaultPrevented&&(c=h.details.width,c&&c!==a._lazysizesWidth))){if(a._lazysizesWidth=c,c+="px",a.setAttribute("sizes",c),e.test(i.nodeName||""))for(d=i.getElementsByTagName("source"),f=0,g=d.length;g>f;f++)d[f].setAttribute("sizes",c);h.details.dataAttr||l(a,h.details)}},f=function(){var b,c=a.length;if(c)for(b=0;c>b;b++)d(a[b])},g=o(f),h=function(){a=b.getElementsByClassName(c.autosizesClass),addEventListener("resize",g)};return{init:h,checkElems:g,updateElem:d}}();return function(){var b,d={lazyClass:"lazyload",loadedClass:"lazyloaded",loadingClass:"lazyloading",preloadClass:"lazypreload",scroll:!0,autosizesClass:"lazyautosizes",srcAttr:"data-src",srcsetAttr:"data-srcset",sizesAttr:"data-sizes",addClasses:!0,minSize:50,customMedia:{}};c=a.lazySizesConfig||{};for(b in d)b in c||(c[b]=d[b]);a.lazySizesConfig=c,setTimeout(function(){q.init(),p.init()})}(),{cfg:c,autoSizer:q,loader:p,updateAllSizes:q.updateElems,updateAllLazy:p.checkElems,unveilLazy:p.unveil,uS:q.updateElem,uP:l,aC:h,rC:i,hC:g,fire:k,gW:n}}}); \ No newline at end of file +!function(a,b){a.lazySizes=b(a,a.document),"function"==typeof define&&define.amd&&define(a.lazySizes)}(window,function(a,b){"use strict";if(b.getElementsByClassName){var c,d=b.documentElement,e=/^picture$/i,f=["load","error","lazyincluded","_lazyloaded"],g=function(a,b){var c=new RegExp("(\\s|^)"+b+"(\\s|$)");return a.className.match(c)&&c},h=function(a,b){g(a,b)||(a.className+=" "+b)},i=function(a,b){var c;(c=g(a,b))&&(a.className=a.className.replace(c," "))},j=function(a,b,c){var d=c?"addEventListener":"removeEventListener";c&&j(a,b),f.forEach(function(c){a[d](c,b)})},k=function(a,c,d){var e=b.createEvent("Event");return e.initEvent(c,!0,!0),e.details=d||{},a.dispatchEvent(e),e},l=function(b,c){var d,e;a.HTMLPictureElement||(a.picturefill?picturefill({reevaluate:!0,reparse:!0,elements:[b]}):a.respimage?(c&&(e=c.srcset&&"srcset"||c.src&&"src")&&(d=b[respimage._.ns],d&&d[e]!=c[e]&&b.getAttribute(e)==c[e]&&(d[e]=void 0)),respimage({reparse:!0,elements:[b]})):c&&c.src&&(b.src=c.src))},m=function(a,b){return getComputedStyle(a,null)[b]},n=function(a,d){for(var e=a.offsetWidth;eK||!a.target)&&(K=0)},N=function(a,c){var e,f=a,g="hidden"!=m(a,"visibility");for(v-=c,y+=c,w-=c,x+=c;g&&(f=f.offsetParent)&&f!=d&&f!=b.body;)g=p&&4>K||(m(f,"opacity")||1)>0,g&&"visible"!=m(f,"overflow")&&(e=f.getBoundingClientRect(),g=x>e.left-1&&we.top-1&&vm&&f[m];m++,L++)if((i=f[m].getAttribute("data-expand"))&&(e=1*i)||(e=H),!(K>6&&(!i||"src"in f[m])))if(K>3&&e>E&&(e=E),j!==e&&(t=innerWidth+e,u=innerHeight+e,h=-1*e,j=e),a=f[m].getBoundingClientRect(),(y=a.bottom)>=h&&(v=a.top)<=u&&(x=a.right)>=h&&(w=a.left)<=t&&(y||x||w||v)&&(p&&H==F&&3>K&&4>J&&!i||N(f[m],e)))L--,l+=2,S(f[m]),d=!0;else{if(!s&&Date.now()-l>3)return L++,s=!0,void P();!d&&p&&!b&&3>K&&4>J&&(g[0]||c.preloadAfterLoad)&&(g[0]||!i&&(y||x||w||v||"auto"!=f[m].getAttribute(c.sizesAttr)))&&(b=g[0]||f[m])}L=0,s=!1,J++,G>H&&2>K&&J>4?(H=G,J=0,P()):H!=F&&(H=F),b&&!d&&S(b)}},P=o(O),Q=function(a){h(a.target,c.loadedClass),i(a.target,c.loadingClass),j(a.target,Q)},R=function(a,b){try{a.contentWindow.location.replace(b)}catch(c){a.setAttribute("src",b)}},S=function(a,b){var d,f,g,m,n,o,s,t,u,v,w,x,y=a.currentSrc||a.src,z=C.test(a.nodeName);if(B||p||!z||!y||a.complete){if(!(v=k(a,"lazybeforeunveil",{force:!!b})).defaultPrevented){if(n=a.getAttribute(c.sizesAttr)||a.getAttribute("sizes"),n&&("auto"==n?q.updateElem(a,!0):a.setAttribute("sizes",n)),s=a.getAttribute(c.srcsetAttr),o=a.getAttribute(c.srcAttr),w=v.details.firesLoad||"src"in a&&(s||o),w&&(K++,j(a,M,!0),clearTimeout(r),r=setTimeout(M,3e3),z&&(t=a.parentNode,u=e.test(t.nodeName||""))),s||o){if(u)for(d=t.getElementsByTagName("source"),f=0,g=d.length;g>f;f++)(x=c.customMedia[d[f].getAttribute("media")])&&d[f].setAttribute("media",x),m=d[f].getAttribute(c.srcsetAttr),m&&d[f].setAttribute("srcset",m);s?(a.setAttribute("srcset",s),A&&n&&a.removeAttribute("src")):o&&(D.test(a.nodeName)?R(a,o):a.setAttribute("src",o))}c.addClasses&&(h(a,c.loadingClass),j(a,Q,!0))}setTimeout(function(){"auto"==n&&h(a,c.autosizesClass),(s||u)&&l(a,{srcset:s,src:o}),i(a,c.lazyClass),(!w||a.complete&&y==(a.currentSrc||a.src))&&(w&&M(v),c.addClasses&&Q(v)),a=null})}},T=function(){n&&!I&&(F=Math.max(Math.min(c.expand||c.threshold||120,300),9),G=4*F),I=!0},U=function(){n=!0,I=!1},V=function(){p=!0,U(),P(!0)},W=function(){f=b.getElementsByClassName(c.lazyClass),g=b.getElementsByClassName(c.lazyClass+" "+c.preloadClass),c.scroll&&addEventListener("scroll",P,!0),addEventListener("resize",function(){I=!1,P()}),a.MutationObserver?new MutationObserver(P).observe(d,{childList:!0,subtree:!0,attributes:!0}):(d.addEventListener("DOMNodeInserted",P,!0),d.addEventListener("DOMAttrModified",P,!0)),addEventListener("hashchange",P,!0),["transitionstart","transitionend","load","focus","mouseover","animationend","click"].forEach(function(a){b.addEventListener(a,P,!0)}),(p=/d$|^c/.test(b.readyState))||(addEventListener("load",V),b.addEventListener("DOMContentLoaded",P)),setTimeout(U,666),P()};return{init:W,checkElems:P,unveil:S}}(),q=function(){var a,d=function(a,b){var c,d,f,g,h,i=a.parentNode;if(i&&(c=n(a,i),h=k(a,"lazybeforesizes",{width:c,dataAttr:!!b}),!h.defaultPrevented&&(c=h.details.width,c&&c!==a._lazysizesWidth))){if(a._lazysizesWidth=c,c+="px",a.setAttribute("sizes",c),e.test(i.nodeName||""))for(d=i.getElementsByTagName("source"),f=0,g=d.length;g>f;f++)d[f].setAttribute("sizes",c);h.details.dataAttr||l(a,h.details)}},f=function(){var b,c=a.length;if(c)for(b=0;c>b;b++)d(a[b])},g=o(f),h=function(){a=b.getElementsByClassName(c.autosizesClass),addEventListener("resize",g)};return{init:h,checkElems:g,updateElem:d}}();return function(){var b,d={lazyClass:"lazyload",loadedClass:"lazyloaded",loadingClass:"lazyloading",preloadClass:"lazypreload",scroll:!0,autosizesClass:"lazyautosizes",srcAttr:"data-src",srcsetAttr:"data-srcset",sizesAttr:"data-sizes",addClasses:!0,minSize:50,customMedia:{}};c=a.lazySizesConfig||{};for(b in d)b in c||(c[b]=d[b]);a.lazySizesConfig=c,setTimeout(function(){q.init(),p.init()})}(),{cfg:c,autoSizer:q,loader:p,updateAllSizes:q.updateElems,updateAllLazy:p.checkElems,unveilLazy:p.unveil,uS:q.updateElem,uP:l,aC:h,rC:i,hC:g,fire:k,gW:n}}}); \ No newline at end of file