From a62b7d68a617a1a6c70b16b2d46bcc7dc0abf9ce Mon Sep 17 00:00:00 2001 From: aFarkas Date: Wed, 5 Nov 2014 20:23:27 +0100 Subject: [PATCH] 0.4.0 --- .npmignore | 19 +++++++++++++++++++ bower.json | 2 +- component.json | 2 +- lazysizes.min.js | 2 +- package.json | 11 +++++++++-- plugins/rias/README.md | 30 +++++++++++++++++------------- 6 files changed, 48 insertions(+), 18 deletions(-) create mode 100644 .npmignore diff --git a/.npmignore b/.npmignore new file mode 100644 index 00000000..19281deb --- /dev/null +++ b/.npmignore @@ -0,0 +1,19 @@ +*.bak +node_modules +*.zip +.* +play +node_modules +bower_components +cfg +test +tests +maxdpr +rias +assets +index.html +Gruntfile.js +component.json +package.json +bower.json +Authors.txt diff --git a/bower.json b/bower.json index e59befce..3bf1849d 100644 --- a/bower.json +++ b/bower.json @@ -1,7 +1,7 @@ { "name": "lazysizes", "repo": "afarkas/lazysizes", - "version": "0.4.0-RC1", + "version": "0.4.0", "main": "lazysizes.min.js", "scripts": [ "lazysizes.min.js" diff --git a/component.json b/component.json index 2c5d4b20..b8a58183 100644 --- a/component.json +++ b/component.json @@ -1,6 +1,6 @@ { "name": "lazysizes", - "version": "0.4.0-RC1", + "version": "0.4.0", "repo": "afarkas/lazysizes", "main": "lazysizes.min.js", "scripts": ["lazysizes.min.js"], diff --git a/lazysizes.min.js b/lazysizes.min.js index 4bd17b18..75bbd0c3 100644 --- a/lazysizes.min.js +++ b/lazysizes.min.js @@ -1,3 +1,3 @@ -/*! lazysizes - v0.4.0-RC1 - 2014-11-05 +/*! lazysizes - v0.4.0 - 2014-11-05 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"==s.readyState&&console.log("use a respimg polyfill: http://bit.ly/1FCts3P")}function b(a){t++,a=d(a),z(a,M),z(a,M,!0),clearTimeout(D),D=setTimeout(M,5e3)}function c(){m=0,clearTimeout(l)}function d(b,c){var d,e,g,h,j,k,l,m,n,q=B(b,"lazybeforeunveil",{force:!!c});if(!q.defaultPrevented){if(j=b.getAttribute(i.sizesAttr)||b.getAttribute("sizes"),v.test(b.nodeName||"")&&(m=b.parentNode,n=u.test(m.nodeName||""),!x&&!n&&!c&&!b.complete&&b.getAttribute("src")&&b.src&&!b.lazyload))return z(b,A),void z(b,A,!0);if(j&&("auto"==j?f(b,!0):b.setAttribute("sizes",j),i.clearAttr&&b.removeAttribute(i.sizesAttr)),l=b.getAttribute(i.srcsetAttr),k=b.getAttribute(i.srcAttr),n)for(d=m.getElementsByTagName("source"),e=0,g=d.length;g>e;e++)h=d[e].getAttribute(i.srcsetAttr),h&&d[e].setAttribute("srcset",h);l?(b.setAttribute("srcset",l),i.clearAttr&&b.removeAttribute(i.srcsetAttr)):k&&(b.setAttribute("src",k),i.clearAttr&&b.removeAttribute(i.srcAttr))}return y(function(){p(b,i.lazyClass),"auto"==j&&o(b,i.autosizesClass),(l||j)&&a(b,{srcset:l,src:k})}),b}function e(){k=0,clearTimeout(j)}function f(b,c){var d,e,f,g,h,j,k,l;if(g=b.parentNode){if(d=g.offsetWidth,e=b.offsetWidth,f=e>d?e:d,!f&&!b._lazysizesWidth)for(;g&&g!=s.body&&!f;)f=g.offsetWidth,g=g.parentNode;if(l=B(b,"lazybeforesizes",{width:f,dataAttr:!!c}),!l.defaultPrevented&&(f=l.details.width,f&&f!==b._lazysizesWidth&&(!i.onlyLargerSizes||!b._lazysizesWidth||b._lazysizesWidthj;j++)h[j].setAttribute("sizes",f);l.details.dataAttr||a(b)}}}if(Date.now&&window.document.getElementsByClassName&&Object.freeze){var g,h,i,j,k,l,m,n,o,p,q,r,s=window.document,t=0,u=/^picture$/i,v=/^img$/i,w=10,x=/rident|hrome/.test(navigator.userAgent||""),y=window.setImmediate||window.setTimeout,z=function(a,b,c){var d=c?"addEventListener":"removeEventListener";a[d]("load",b,!1),a[d]("error",b,!1)},A=function(a){z(a.target,A),d(a.target,!0)},B=function(a,b,c){var d=s.createEvent("Event");return d.initEvent(b,!0,!0),d.details=c||{},a.dispatchEvent(d),d};s.documentElement.classList?(o=function(a,b){a.classList.add(b)},p=function(a,b){a.classList.remove(b)},q=function(a,b){return a.classList.contains(b)}):(o=function(a,b){q(a,b)||(a.className+=" "+b)},p=function(a,b){var c;q(a,b)&&(c=new RegExp("(\\s|^)"+b+"(\\s|$)"),a.className=a.className.replace(c," "))},q=function(a,b){return a.className.match(new RegExp("(\\s|^)"+b+"(\\s|$)"))});var C,D,E,F,G,H,I,J,K,L=Date.now(),M=function(a){t--,clearTimeout(D),a&&a.target&&z(a.target,M),(!a||0>t||!a.target)&&(t=0)},N=function(){var a,b,d=function(){b=!1},e=function(){clearTimeout(a),c(),O(),setTimeout(d)};return{debounce:function(){clearTimeout(a),clearTimeout(n),b=!0,a=setTimeout(e,66)},throttled:function(){var c;b||(b=!0,clearTimeout(a),c=Date.now()-L,c=c>300?9:99,a=setTimeout(e,c))}}}(),O=function(){var a,c,e;if(C=g.length,L=Date.now(),C){for(E=window.innerWidth+w,F=window.innerHeight+w,K=-1*w;C>m;m++)if(a=g[m].getBoundingClientRect(),(J=a.bottom)>=K&&(G=a.top)<=F&&(I=a.right)>=K&&(H=a.left)<=E&&(J||I||H||G))d(g[m]),e=!0;else{if(C-1>m&&Date.now()-L>9){m++,c=!1,l=setTimeout(O,4);break}!e&&r&&!c&&i.preloadAfterLoad&&2>t&&(J||I||H||G||"auto"!=g[m].getAttribute(i.sizesAttr))&&(c=g[m])}c&&!e&&b(c)}},P=function(){var a,b=function(){clearTimeout(a),e(),Q()};return function(){clearTimeout(a),clearTimeout(j),a=setTimeout(b,99)}}(),Q=function(){var a,b,c,d=h.length;if(d)for(b=Date.now(),c=k||0,a=c+3,e();d>c;c++)if(f(h[c]),c>a&&d-1>c&&Date.now()-b>9){k=c+1,j=setTimeout(Q,4);break}},R=function(){w=400,clearTimeout(n),s.addEventListener("load",N.throttled,!0),r=!0},S=function(){var a=s.documentElement;i.mutation&&(window.MutationObserver?new MutationObserver(N.throttled).observe(a,{childList:!0,subtree:!0,attributes:!0}):(a.addEventListener("DOMNodeInserted",N.throttled,!0),a.addEventListener("DOMAttrModified",N.throttled,!0))),i.hover&&s.addEventListener("mouseover",N.throttled,!0),s.addEventListener("focus",N.throttled,!0),window.addEventListener("hashchange",N.throttled,!0),"onmozfullscreenchange"in a?window.addEventListener("mozfullscreenchange",N.throttled,!0):"onwebkitfullscreenchange"in a?window.addEventListener("webkitfullscreenchange",N.throttled,!0):window.addEventListener("fullscreenchange",N.throttled,!0),i.cssanimation&&(s.addEventListener("animationstart",N.throttled,!0),s.addEventListener("transitionstart",N.throttled,!0))};return i=window.lazySizesConfig||{},function(){var a,b={mutation:!0,hover:!0,cssanimation:!0,lazyClass:"lazyload",scroll:!0,autosizesClass:"lazyautosizes",srcAttr:"data-src",srcsetAttr:"data-srcset",sizesAttr:"data-sizes",preloadAfterLoad:!1,onlyLargerSizes:!0};for(a in b)a in i||(i[a]=b[a])}(),setTimeout(function(){g=s.getElementsByClassName(i.lazyClass),h=s.getElementsByClassName(i.autosizesClass),i.scroll&&addEventListener("scroll",N.throttled,!0),addEventListener("resize",N.debounce,!1),addEventListener("resize",P,!1),/^i|^loade|c/.test(s.readyState)?S():s.addEventListener("DOMContentLoaded",S,!1),"complete"==s.readyState?R():(addEventListener("load",R,!1),s.addEventListener("readystatechange",N.throttled,!1)),N.throttled()}),{cfg:i,updateAllSizes:P,updateAllLazy:N.throttled,unveilLazy:function(a){q(a,i.lazyClass)&&d(a)},updateSizes:f,updatePolyfill:a}}}); \ No newline at end of file diff --git a/package.json b/package.json index 1492f18e..1f0280c4 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,11 @@ { "name": "lazysizes", - "version": "0.4.0-RC1", + "version": "0.4.0", + "author": "Alexander Farkas ", + "repository": { + "type": "git", + "url": "git://github.com/aFarkas/lazysizes.git" + }, "engines": { "node": ">= 0.8.0" }, @@ -23,5 +28,7 @@ "files": [ "lazysizes.min.js" ] - } + }, + "description": "High performance (jankfree) lazy loader for images (including responsive images), iframes and scripts (widgets).", + "keywords": ["lazy", "lazyloader", "performance", "responsive", "image", "responsive images", "picture", "srcset"] } diff --git a/plugins/rias/README.md b/plugins/rias/README.md index 2639d7bf..5be7ad76 100644 --- a/plugins/rias/README.md +++ b/plugins/rias/README.md @@ -1,25 +1,29 @@ #lazysizes RIaS extension (Responsive image as a service) -The RiaS plugin enables lazySizes to hook into any third party (ReSrc, pixulate, mobify ...) or self hosted restful responsive image service. This is currently the best way to serve adaptive and or retina optimized images. +The RiaS plugin enables lazySizes to hook into any third party (ReSrc, Pixtulate, mobify ...) or self hosted restful responsive image service. This is currently the best way to serve responsive adaptive and / or retina optimized images. The rias plugin also allows art direction by combining rias with a ``picture`` element. ##Basic/quick usage * Simply add the rias plugin right after the lazysizes or concat those scripts into your script bundle: - ```html - - - ``` + +```html + + +``` + * Add the ``lazyload`` class and the ``data-sizes="auto"`` attribute to your image and include the placeholder ``{width}`` at the point, where your image service expects the requested width of the image. - ```html - - ``` + +```html + +``` + ##[Demo](http://afarkas.github.io/lazysizes/rias/) A [demo with markup and code examples can be seen here](http://afarkas.github.io/lazysizes/rias/).