diff --git a/lazysizes.js b/lazysizes.js index df31288c..88dc96fc 100644 --- a/lazysizes.js +++ b/lazysizes.js @@ -279,20 +279,21 @@ }; var unveilElement = function (elem, force){ - var sources, i, len, sourceSrcset, sizes, src, srcset, parent, isPicture, event, firesLoad, customMedia; + var sources, i, len, sourceSrcset, src, srcset, parent, isPicture, event, firesLoad, customMedia; var curSrc = elem.currentSrc || elem.src; var isImg = regImg.test(elem.nodeName); - if(!supportNativeLQIP && !isCompleted && isImg && curSrc && !elem.complete){return;} + //allow using sizes="auto", but don't use. it's invalid. Use data-sizes="auto" or a valid value for sizes instead (i.e.: sizes="80vw") + var sizes = elem.getAttribute(lazySizesConfig.sizesAttr) || elem.getAttribute('sizes'); + var isAuto = sizes == 'auto'; - if(!(event = triggerEvent(elem, 'lazybeforeunveil', {force: !!force})).defaultPrevented){ + if( (isAuto || (!supportNativeLQIP && !isCompleted)) && isImg && curSrc && !elem.complete){return;} - //allow using sizes="auto", but don't use. it's invalid. Use data-sizes="auto" or a valid value for sizes instead (i.e.: sizes="80vw") - sizes = elem.getAttribute(lazySizesConfig.sizesAttr) || elem.getAttribute('sizes'); + if(!(event = triggerEvent(elem, 'lazybeforeunveil', {force: !!force})).defaultPrevented){ if(sizes){ - if(sizes == 'auto'){ + if(isAuto){ autoSizer.updateElem(elem, true); } else { elem.setAttribute('sizes', sizes); diff --git a/lazysizes.min.js b/lazysizes.min.js index d1ca38f0..43ac1017 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||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 +!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=a.currentSrc||a.src,y=C.test(a.nodeName),z=a.getAttribute(c.sizesAttr)||a.getAttribute("sizes"),E="auto"==z;if(!E&&(B||p)||!y||!x||a.complete){if(!(u=k(a,"lazybeforeunveil",{force:!!b})).defaultPrevented){if(z&&(E?q.updateElem(a,!0):a.setAttribute("sizes",z)),o=a.getAttribute(c.srcsetAttr),n=a.getAttribute(c.srcAttr),v=u.details.firesLoad||"src"in a&&(o||n),v&&(K++,j(a,M,!0),clearTimeout(r),r=setTimeout(M,3e3),y&&(s=a.parentNode,t=e.test(s.nodeName||""))),o||n){if(t)for(d=s.getElementsByTagName("source"),f=0,g=d.length;g>f;f++)(w=c.customMedia[d[f].getAttribute("media")])&&d[f].setAttribute("media",w),m=d[f].getAttribute(c.srcsetAttr),m&&d[f].setAttribute("srcset",m);o?(a.setAttribute("srcset",o),A&&z&&a.removeAttribute("src")):n&&(D.test(a.nodeName)?R(a,n):a.setAttribute("src",n))}c.addClasses&&(h(a,c.loadingClass),j(a,Q,!0))}setTimeout(function(){"auto"==z&&h(a,c.autosizesClass),(o||t)&&l(a,{srcset:o,src:n}),i(a,c.lazyClass),(!v||a.complete&&x==(a.currentSrc||a.src))&&(v&&M(u),c.addClasses&&Q(u)),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