diff --git a/README.md b/README.md index 10a05917..3a669084 100644 --- a/README.md +++ b/README.md @@ -89,7 +89,7 @@ The recommended LQUIP pattern has the following advantages. The lquip-src is not **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 -Options can be set by declaring a global conifguration option object named ``lazySizesConfig``. This object should be defined before the including lazySizes script or at least in the same script file. Here a basic example: +Options can be set by declaring a global configuration option object named ``lazySizesConfig``. This object should be defined before the including lazySizes script or at least in the same script file. Here a basic example: ```js window.lazySizesConfig = { @@ -103,7 +103,7 @@ Here the list of options: * ``lazySizesConfig.lazyClass`` (default: ``"lazyload"``): Marker class for all elements which should be lazy loaded (There can be only one ``class``. In case you need to add some other element, without the defined class, simply add it per JS: ``$('.lazy-others').addClass('lazyload');``) * ``lazySizesConfig.preloadAfterLoad`` (default: ``false``): Wether lazysizes should load all elements after the window onload event. (Note: lazysizes will then load all elements using a queue. Only two parallel elements are loaded at the same time. This makes sure that other postboned downloads are also loaded.). Recommendation: On non-mobile devices this should be ``true``. * ``lazySizesConfig.beforeUnveil`` (default: ``undefined``): A callback function, which will be invoked for each lazyload element right before of the "unveil" transformation. Gets the ``element`` as first argument passed. In case the callback function returns ``false``, the default transformation action will be prevented. -* ``lazySizesConfig.beforeSizes`` (default: ``undefined``): A callback function, which will be invoked for each element width the ``data-sizes="auto"`` attribute right before the calculated ``sizes`` attribute will be set. Gets the ``element`` and the calculated width for the sizes attribute passed. In case the callback function returns a number this number will be set, in case it returns ``false`` the ``sizes`` attribute won't be changed. +* ``lazySizesConfig.beforeSizes`` (default: ``undefined``): A callback function, which will be invoked for each element with the ``data-sizes="auto"`` attribute right before the calculated ``sizes`` attribute will be set. Gets the ``element`` and the calculated width for the sizes attribute passed. In case the callback function returns a number this number will be set, in case it returns ``false`` the ``sizes`` attribute won't be changed. * ``lazySizesConfig.onlyLargerSizes`` (default: ``true``): In case a responsive image had the ``data-sizes="auto"`` attribute and the computed new size decreases, lazysizes won't normally change the ``sizes`` attribute to a lower value. * ``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/bower.json b/bower.json index a1c7261f..fe2b07dc 100644 --- a/bower.json +++ b/bower.json @@ -1,7 +1,7 @@ { "name": "lazysizes", "repo": "afarkas/lazysizes", - "version": "0.1.3", + "version": "0.1.4", "main": "lazysizes.min.js", "scripts": [ "lazysizes.min.js" diff --git a/component.json b/component.json index 4b509ba6..9885ba2d 100644 --- a/component.json +++ b/component.json @@ -1,6 +1,6 @@ { "name": "lazysizes", - "version": "0.1.3", + "version": "0.1.4", "repo": "afarkas/lazysizes", "main": "lazysizes.min.js", "scripts": ["lazysizes.min.js"], diff --git a/lazysizes.js b/lazysizes.js index 4f09710d..5fdd45d0 100644 --- a/lazysizes.js +++ b/lazysizes.js @@ -25,7 +25,7 @@ var setImmediate = window.setImmediate || window.setTimeout; var scriptUrls = {}; var addRemoveImgEvents = function(dom, fn, add){ - var action = add ? 'addEventListener' : removeEventListener; + var action = add ? 'addEventListener' : 'removeEventListener'; dom[action]('load', fn, false); dom[action]('abort', fn, false); dom[action]('readystatechange', fn, false); @@ -88,8 +88,9 @@ clearTimeout(resetPreloadingTimer); if(e && e.target){ addRemoveImgEvents(e.target, resetPreloading); - } else { - isPreloading--; + } + if(!e || isPreloading < 0 || !e.target) { + isPreloading = 0; } }; var lazyEvalLazy = (function(){ diff --git a/lazysizes.min.js b/lazysizes.min.js index 119ea217..47809098 100644 --- a/lazysizes.min.js +++ b/lazysizes.min.js @@ -1,3 +1,3 @@ -/*! lazysizes - v0.1.3 - 2014-10-16 +/*! lazysizes - v0.1.4 - 2014-10-16 Licensed MIT */ -!function(a){window.lazySizes=a(),"function"==typeof define&&define.amd&&define(function(){return window.lazySizes})}(function(){"use strict";function a(a,b){var c;window.picturefill?picturefill({reevaluate:!0,reparse:!0,elements:[a]}):window.respimage&&!respimage._.observer?(b&&(c=a[respimage._.ns],c&&(c[b.srcset?"srcset":"src"]=void 0)),respimage({reparse:!0,elements:[a]})):!window.HTMLPictureElement&&window.console&&"complete"==t.readyState&&console.log("Please use a responsive image polyfill, like respimage or picturefill. https://github.com/aFarkas/respimage")}function b(a){u++,a=e(a),C(a,N),C(a,N,!0),clearTimeout(E),E=setTimeout(N,5e3)}function c(a){var b=t.createElement("script"),c=a.parentNode;return a.removeAttribute(j.srcAttr),c.insertBefore(b,a),A(function(){q(a,j.lazyClass)}),b}function d(){n=0,clearTimeout(m)}function e(b,d){var e,f,h,i,k,l,m,n,o;if(j.beforeUnveil&&(k=j.beforeUnveil(b,d)),k!==!1&&(l=b.getAttribute(j.sizesAttr),m=b.getAttribute(j.srcAttr),n=b.getAttribute(j.srcsetAttr),o=b.parentNode,m||n)){if(v.test(b.nodeName)&&(b=c(b)),x.test(b.nodeName||"")){if(B[m])return;B[m]=!0}else if(y.test(b.nodeName||"")){if(!d&&!b.complete&&b.getAttribute("src")&&b.src&&!b.lazyload)return C(b,N),void C(b,N,!0);if(w.test(o.nodeName||""))for(e=o.getElementsByTagName("source"),f=0,h=e.length;h>f;f++)i=e[f].getAttribute(j.srcsetAttr),i&&e[f].setAttribute("srcset",i)}l&&("auto"==l?g(b,!0):b.setAttribute("sizes",l),b.removeAttribute(j.sizesAttr),!n&&window.console&&b.getAttribute("srcset")&&console.log("using lazysizes with a `srcset` attribute is not good. Use `data-srcset` instead")),n?(b.setAttribute("srcset",n),b.removeAttribute(j.srcsetAttr)):m&&(b.setAttribute("src",m),b.removeAttribute(j.srcAttr))}return A(function(){q(b,j.lazyClass),"auto"==l&&p(b,j.autosizesClass),(n||l)&&a(b,{srcset:n,src:m})}),b}function f(){l=0,clearTimeout(k)}function g(b,c){var d,e,f,g,h,i,k,l;if(h=b.parentNode){if(d=h.offsetWidth,e=b.offsetWidth,f=e>d?e:d,!f&&!b._lazysizesWidth)for(;h&&h!=t.body&&!f;)f=h.offsetWidth,h=h.parentNode;if(j.beforeSizes)if(g=j.beforeSizes(b,f),"number"==typeof g)f=g;else if(g===!1)return;if(f&&(!j.onlyLargerSizes||!b._lazysizesWidth||b._lazysizesWidthk;k++)i[k].setAttribute("sizes",f);c||a(b)}}}if(Date.now&&window.document.getElementsByClassName){var h,i,j,k,l,m,n,o,p,q,r,s,t=window.document,u=0,v=/^(?:span|div)$/i,w=/^picture$/i,x=/^script$/i,y=/^img$/i,z=10,A=window.setImmediate||window.setTimeout,B={},C=function(a,b,c){var d=c?"addEventListener":removeEventListener;a[d]("load",b,!1),a[d]("abort",b,!1),a[d]("readystatechange",b,!1),a[d]("error",b,!1)};t.documentElement.classList?(p=function(a,b){a.classList.add(b)},q=function(a,b){a.classList.remove(b)},r=function(a,b){a.classList.contains(b)}):(p=function(a,b){r(a,b)||(a.className+=" "+b)},q=function(a,b){var c;r(a,b)&&(c=new RegExp("(\\s|^)"+b+"(\\s|$)"),a.className=a.className.replace(c," "))},r=function(a,b){return a.className.match(new RegExp("(\\s|^)"+b+"(\\s|$)"))});var D,E,F,G,H,I,J,K,L,M=Date.now(),N=function(a){u--,clearTimeout(E),a&&a.target?C(a.target,N):u--},O=function(){var a,b,c=function(){b=!1},e=function(){clearTimeout(a),d(),P(),setTimeout(c)};return{debounce:function(){clearTimeout(a),clearTimeout(o),b=!0,a=setTimeout(e,66)},throttled:function(){var c;b||(b=!0,clearTimeout(a),c=Date.now()-M,c=c>300?9:99,a=setTimeout(e,c))}}}(),P=function(){var a,c,d;if(D=h.length,M=Date.now(),D){for(F=window.innerWidth+z,G=window.innerHeight+z,L=-1*z;D>n;n++)if(a=h[n].getBoundingClientRect(),(K=a.bottom)>=L&&(H=a.top)<=G&&(J=a.right)>=L&&(I=a.left)<=F&&(K||J||I||H))e(h[n]),d=!0;else{if(D-1>n&&Date.now()-M>9){n++,c=!1,m=setTimeout(P,4);break}!d&&s&&!c&&j.preloadAfterLoad&&2>u&&(K||J||I||H||"auto"!=h[n].getAttribute(j.sizesAttr))&&(c=h[n])}c&&!d&&b(c)}},Q=function(){var a,b=function(){clearTimeout(a),f(),R()};return function(){clearTimeout(a),clearTimeout(k),a=setTimeout(b,99)}}(),R=function(){var a,b,c,d=i.length;if(d)for(b=Date.now(),c=l||0,a=c+3,f();d>c;c++)if(g(i[c]),c>a&&d-1>c&&Date.now()-b>9){l=c+1,k=setTimeout(R,4);break}},S=function(){z=400,clearTimeout(o),t.addEventListener("load",O.throttled,!0),s=!0},T=function(){var a=t.body||t.documentElement;j.mutation&&(window.MutationObserver?new MutationObserver(O.throttled).observe(t.documentElement,{childList:!0,subtree:!0,attributes:!0}):(a.addEventListener("DOMNodeInserted",O.throttled,!0),t.documentElement.addEventListener("DOMAttrModified",O.throttled,!0))),j.hover&&t.addEventListener("mouseover",O.throttled,!0),t.addEventListener("focus",O.throttled,!0),window.addEventListener("hashchange",O.throttled,!0),"onmozfullscreenchange"in a?window.addEventListener("mozfullscreenchange",O.throttled,!0):"onwebkitfullscreenchange"in a?window.addEventListener("webkitfullscreenchange",O.throttled,!0):window.addEventListener("fullscreenchange",O.throttled,!0),j.cssanimation&&(t.addEventListener("animationstart",O.throttled,!0),t.addEventListener("transitionstart",O.throttled,!0))};return setTimeout(function(){var a,b={mutation:!0,hover:!0,cssanimation:!0,lazyClass:"lazyload",autosizesClass:"lazyautosizes",srcAttr:"data-src",srcsetAttr:"data-srcset",sizesAttr:"data-sizes",preloadAfterLoad:!1,onlyLargerSizes:!0};j=window.lazySizesConfig||{};for(a in b)a in j||(j[a]=b[a]);h=t.getElementsByClassName(j.lazyClass),i=t.getElementsByClassName(j.autosizesClass),window.addEventListener("scroll",O.throttled,!1),(t.body||t.documentElement).addEventListener("scroll",O.throttled,!0),t.addEventListener("touchmove",O.throttled,!1),window.addEventListener("resize",O.debounce,!1),window.addEventListener("resize",Q,!1),/^i|^loade|c/.test(t.readyState)?T():t.addEventListener("DOMContentLoaded",T,!1),"complete"==t.readyState?S():(window.addEventListener("load",S,!1),t.addEventListener("readystatechange",O.throttled,!1)),O.throttled(),"lazySizesConfig"in window&&(window.lazySizesConfig=null)},t.body?9:99),{updateAllSizes:Q,updateAllLazy:O.throttled,unveilLazy:function(a){r(a,j.lazyClass)&&e(a)},updateSizes:g,updatePolyfill:a}}}); \ No newline at end of file +!function(a){window.lazySizes=a(),"function"==typeof define&&define.amd&&define(function(){return window.lazySizes})}(function(){"use strict";function a(a,b){var c;window.picturefill?picturefill({reevaluate:!0,reparse:!0,elements:[a]}):window.respimage&&!respimage._.observer?(b&&(c=a[respimage._.ns],c&&(c[b.srcset?"srcset":"src"]=void 0)),respimage({reparse:!0,elements:[a]})):!window.HTMLPictureElement&&window.console&&"complete"==t.readyState&&console.log("Please use a responsive image polyfill, like respimage or picturefill. https://github.com/aFarkas/respimage")}function b(a){u++,a=e(a),C(a,N),C(a,N,!0),clearTimeout(E),E=setTimeout(N,5e3)}function c(a){var b=t.createElement("script"),c=a.parentNode;return a.removeAttribute(j.srcAttr),c.insertBefore(b,a),A(function(){q(a,j.lazyClass)}),b}function d(){n=0,clearTimeout(m)}function e(b,d){var e,f,h,i,k,l,m,n,o;if(j.beforeUnveil&&(k=j.beforeUnveil(b,d)),k!==!1&&(l=b.getAttribute(j.sizesAttr),m=b.getAttribute(j.srcAttr),n=b.getAttribute(j.srcsetAttr),o=b.parentNode,m||n)){if(v.test(b.nodeName)&&(b=c(b)),x.test(b.nodeName||"")){if(B[m])return;B[m]=!0}else if(y.test(b.nodeName||"")){if(!d&&!b.complete&&b.getAttribute("src")&&b.src&&!b.lazyload)return C(b,N),void C(b,N,!0);if(w.test(o.nodeName||""))for(e=o.getElementsByTagName("source"),f=0,h=e.length;h>f;f++)i=e[f].getAttribute(j.srcsetAttr),i&&e[f].setAttribute("srcset",i)}l&&("auto"==l?g(b,!0):b.setAttribute("sizes",l),b.removeAttribute(j.sizesAttr),!n&&window.console&&b.getAttribute("srcset")&&console.log("using lazysizes with a `srcset` attribute is not good. Use `data-srcset` instead")),n?(b.setAttribute("srcset",n),b.removeAttribute(j.srcsetAttr)):m&&(b.setAttribute("src",m),b.removeAttribute(j.srcAttr))}return A(function(){q(b,j.lazyClass),"auto"==l&&p(b,j.autosizesClass),(n||l)&&a(b,{srcset:n,src:m})}),b}function f(){l=0,clearTimeout(k)}function g(b,c){var d,e,f,g,h,i,k,l;if(h=b.parentNode){if(d=h.offsetWidth,e=b.offsetWidth,f=e>d?e:d,!f&&!b._lazysizesWidth)for(;h&&h!=t.body&&!f;)f=h.offsetWidth,h=h.parentNode;if(j.beforeSizes)if(g=j.beforeSizes(b,f),"number"==typeof g)f=g;else if(g===!1)return;if(f&&(!j.onlyLargerSizes||!b._lazysizesWidth||b._lazysizesWidthk;k++)i[k].setAttribute("sizes",f);c||a(b)}}}if(Date.now&&window.document.getElementsByClassName){var h,i,j,k,l,m,n,o,p,q,r,s,t=window.document,u=0,v=/^(?:span|div)$/i,w=/^picture$/i,x=/^script$/i,y=/^img$/i,z=10,A=window.setImmediate||window.setTimeout,B={},C=function(a,b,c){var d=c?"addEventListener":"removeEventListener";a[d]("load",b,!1),a[d]("abort",b,!1),a[d]("readystatechange",b,!1),a[d]("error",b,!1)};t.documentElement.classList?(p=function(a,b){a.classList.add(b)},q=function(a,b){a.classList.remove(b)},r=function(a,b){a.classList.contains(b)}):(p=function(a,b){r(a,b)||(a.className+=" "+b)},q=function(a,b){var c;r(a,b)&&(c=new RegExp("(\\s|^)"+b+"(\\s|$)"),a.className=a.className.replace(c," "))},r=function(a,b){return a.className.match(new RegExp("(\\s|^)"+b+"(\\s|$)"))});var D,E,F,G,H,I,J,K,L,M=Date.now(),N=function(a){u--,clearTimeout(E),a&&a.target&&C(a.target,N),(!a||0>u||!a.target)&&(u=0)},O=function(){var a,b,c=function(){b=!1},e=function(){clearTimeout(a),d(),P(),setTimeout(c)};return{debounce:function(){clearTimeout(a),clearTimeout(o),b=!0,a=setTimeout(e,66)},throttled:function(){var c;b||(b=!0,clearTimeout(a),c=Date.now()-M,c=c>300?9:99,a=setTimeout(e,c))}}}(),P=function(){var a,c,d;if(D=h.length,M=Date.now(),D){for(F=window.innerWidth+z,G=window.innerHeight+z,L=-1*z;D>n;n++)if(a=h[n].getBoundingClientRect(),(K=a.bottom)>=L&&(H=a.top)<=G&&(J=a.right)>=L&&(I=a.left)<=F&&(K||J||I||H))e(h[n]),d=!0;else{if(D-1>n&&Date.now()-M>9){n++,c=!1,m=setTimeout(P,4);break}!d&&s&&!c&&j.preloadAfterLoad&&2>u&&(K||J||I||H||"auto"!=h[n].getAttribute(j.sizesAttr))&&(c=h[n])}c&&!d&&b(c)}},Q=function(){var a,b=function(){clearTimeout(a),f(),R()};return function(){clearTimeout(a),clearTimeout(k),a=setTimeout(b,99)}}(),R=function(){var a,b,c,d=i.length;if(d)for(b=Date.now(),c=l||0,a=c+3,f();d>c;c++)if(g(i[c]),c>a&&d-1>c&&Date.now()-b>9){l=c+1,k=setTimeout(R,4);break}},S=function(){z=400,clearTimeout(o),t.addEventListener("load",O.throttled,!0),s=!0},T=function(){var a=t.body||t.documentElement;j.mutation&&(window.MutationObserver?new MutationObserver(O.throttled).observe(t.documentElement,{childList:!0,subtree:!0,attributes:!0}):(a.addEventListener("DOMNodeInserted",O.throttled,!0),t.documentElement.addEventListener("DOMAttrModified",O.throttled,!0))),j.hover&&t.addEventListener("mouseover",O.throttled,!0),t.addEventListener("focus",O.throttled,!0),window.addEventListener("hashchange",O.throttled,!0),"onmozfullscreenchange"in a?window.addEventListener("mozfullscreenchange",O.throttled,!0):"onwebkitfullscreenchange"in a?window.addEventListener("webkitfullscreenchange",O.throttled,!0):window.addEventListener("fullscreenchange",O.throttled,!0),j.cssanimation&&(t.addEventListener("animationstart",O.throttled,!0),t.addEventListener("transitionstart",O.throttled,!0))};return setTimeout(function(){var a,b={mutation:!0,hover:!0,cssanimation:!0,lazyClass:"lazyload",autosizesClass:"lazyautosizes",srcAttr:"data-src",srcsetAttr:"data-srcset",sizesAttr:"data-sizes",preloadAfterLoad:!1,onlyLargerSizes:!0};j=window.lazySizesConfig||{};for(a in b)a in j||(j[a]=b[a]);h=t.getElementsByClassName(j.lazyClass),i=t.getElementsByClassName(j.autosizesClass),window.addEventListener("scroll",O.throttled,!1),(t.body||t.documentElement).addEventListener("scroll",O.throttled,!0),t.addEventListener("touchmove",O.throttled,!1),window.addEventListener("resize",O.debounce,!1),window.addEventListener("resize",Q,!1),/^i|^loade|c/.test(t.readyState)?T():t.addEventListener("DOMContentLoaded",T,!1),"complete"==t.readyState?S():(window.addEventListener("load",S,!1),t.addEventListener("readystatechange",O.throttled,!1)),O.throttled(),"lazySizesConfig"in window&&(window.lazySizesConfig=null)},t.body?9:99),{updateAllSizes:Q,updateAllLazy:O.throttled,unveilLazy:function(a){r(a,j.lazyClass)&&e(a)},updateSizes:g,updatePolyfill:a}}}); \ No newline at end of file diff --git a/package.json b/package.json index af84d1da..f8b52b7c 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "lazysizes", - "version": "0.1.3", + "version": "0.1.4", "engines": { "node": ">= 0.8.0" },