diff --git a/README.md b/README.md index b2b2d88..4938779 100644 --- a/README.md +++ b/README.md @@ -15,7 +15,7 @@ Responsive images can be technically differentiated between 2 types. * ``srcset`` with source descriptors (let the browser choose the right image based on screen size/resolution, bandwidth…): * density descriptor (``x``) (for static image sizes, Retina vs. normal resolution) * width descriptor (``w``) and the corresponding ``sizes`` attribute (for flexible, responsive / adaptive images) -* and the ``picture`` element with its ``source[media]`` children (gives the author control about what ``srcset` `should be chosen by the browser depending on specific media queries) +* and the ``picture`` element with its ``source[media]`` children (gives the author control about what ``srcset`` should be chosen by the browser depending on specific media queries) ###``srcset`` with the density ``x`` descriptor @@ -133,14 +133,13 @@ The perfselection plugin hooks into the smart selection algorithm to provide mor ##Known issues/caveats * Browsers without picture and srcset support and disabled JS will either show the image specified with the ``src`` attribute or - if omitted - show only the ``alt`` text * **respimage** is quite good at detecting not to download a source candidate, because an image with a good resolution was already downloaded. If a fallback src with a lower resolution or another art direction set is used, **respimage** however will start to download the better candidate, after the browser might have already started to download the worse fallback candidate. Possible solutions/workarounds: - * omit the ``src`` attribute, - * add the attribute ``data-no-ri`` to the images, which shouldn't be polyfilled, + * omit the ``src`` attribute, * use a [lazyLoading](https://github.com/aFarkas/lazysizes) script (what you should do, if you are a performance aware developer anyway) or * simply live with it. (recommended, because **respimage** does not simply switch the image src, but implements the [low quality image placeholder (LQIP)](how-respimg-works.md) technique * Media queries support in old IEs (IE8/IE9) are limited to ``min-width`` and ``max-width``. For IE9 it is possible to extend support by including a [``matchMedia`` polyfill](https://github.com/paulirish/matchMedia.js). ##Responsive images and lazy loading -Beside the fact, that lazy loading improves performance, there is an interesting side effect. Due to delayed image loading the sizes attribute can be dynamically calculated with JS and makes integrating responsive images therefore easy. +Beside the fact, that lazy loading improves performance, there is an interesting side effect. Due to delayed image loading the sizes attribute can be dynamically calculated with JS and makes integrating responsive images in any environment therefore easy. We recommend [lazysizes](https://github.com/aFarkas/lazysizes). ##Authors * Authors of the original work: Scott Jehl, Mat Marquis, Shawn Jansepar (2.0 refactor lead) diff --git a/bower.json b/bower.json index 232df05..b1e3896 100644 --- a/bower.json +++ b/bower.json @@ -1,7 +1,7 @@ { "name": "respimage", "repo": "afarkas/respimage", - "version": "0.9.3-RC1", + "version": "0.9.3", "main": "respimage.min.js", "scripts": [ "respimage.min.js" diff --git a/component.json b/component.json index 56d1a04..0bc0c26 100644 --- a/component.json +++ b/component.json @@ -1,6 +1,6 @@ { "name": "respimage", - "version": "0.9.3-RC1", + "version": "0.9.3", "repo": "afarkas/respimage", "main": "respimage.min.js", "scripts": ["respimage.min.js"], diff --git a/package.json b/package.json index 77bba08..a918d61 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "respimage", - "version": "0.9.3-RC1", + "version": "0.9.3", "engines": { "node": ">= 0.8.0" }, diff --git a/plugins/mutation/ri.mutation.min.js b/plugins/mutation/ri.mutation.min.js index a597fa5..145a590 100644 --- a/plugins/mutation/ri.mutation.min.js +++ b/plugins/mutation/ri.mutation.min.js @@ -1,3 +1,3 @@ -/*! respimage - v0.9.3-RC1 - 2014-10-12 +/*! respimage - v0.9.3 - 2014-10-12 Licensed MIT */ !function(a){"use strict";var b;if(window.respimage&&(b=a(window.respimage),a=function(){return b}),"function"==typeof define&&define.amd)require(["../../respimage"],a);else if("object"==typeof module&&"object"==typeof exports)module.exports=a(require("../../respimage"));else if(!window.respimage)throw"you need to include respimage"}(function(a){"use strict";var b=window.document,c=window.Element,d=window.MutationObserver,e=function(){},f={disconnect:e,take:e,observe:e,start:e,stop:e,connected:!1},g=/^loade|^c|^i/.test(b.readyState||""),h=a._;if(h.mutationSupport=!1,h.observer=f,!Object.keys||!window.HTMLSourceElement||!b.addEventListener)return f;var i,j,k,l,m={src:1,srcset:1,sizes:1,media:1},n=Object.keys(m),o={attributes:!0,childList:!0,subtree:!0,attributeFilter:n},p=c&&c.prototype,q={},r=function(a,b){q[a]=h[a],h[a]=b};return p&&!p.matches&&(p.matches=p.matchesSelector||p.mozMatchesSelector||p.webkitMatchesSelector||p.msMatchesSelector),p&&p.matches&&(i=function(a,b){return a.matches(b)},h.mutationSupport=!(!Object.create||!Object.defineProperties)),h.mutationSupport?(f.observe=function(){k&&(f.connected=!0,j&&j.observe(b.body||b.documentElement,o))},f.disconnect=function(){f.connected=!1,j&&j.disconnect()},f.take=function(){j?h.onMutations(j.takeRecords()):l&&l.take()},f.start=function(){k=!0,f.observe()},f.stop=function(){k=!1,f.disconnect()},r("setupRun",function(){return f.disconnect(),q.setupRun.apply(this,arguments)}),r("teardownRun",function(){var a=q.setupRun.apply(this,arguments);return f.observe(),a}),r("setSrc",function(){var a,b=f.connected;return f.disconnect(),a=q.setSrc.apply(this,arguments),b&&f.observe(),a}),r("addSize",function(){var a,b=f.connected;return f.disconnect(),a=q.addSize.apply(this,arguments),b&&f.observe(),a}),h.onMutations=function(a){var b,c,d=[];for(b=0,c=a.length;c>b;b++)g&&"childList"===a[b].type?h.onSubtreeChange(a[b],d):"attributes"===a[b].type&&h.onAttrChange(a[b],d);d.length&&h.fillImgs({elements:d,reparse:!0,reevaluate:!0})},h.onSubtreeChange=function(a,b){h.findAddedMutations(a.addedNodes,b),h.findRemovedMutations(a.removedNodes,a.target,b)},h.findAddedMutations=function(a,b){var c,d,e,f;for(c=0,d=a.length;d>c;c++)e=a[c],1===e.nodeType&&(f=e.nodeName.toUpperCase(),"PICTURE"===f?h.addToElements(e.getElementsByTagName("img")[0],b):"IMG"===f&&i(e,h.selShort)?h.addToElements(e,b):"SOURCE"===f?h.addImgForSource(e,e.parentNode,b):h.addToElements(h.qsa(e,h.selShort),b))},h.findRemovedMutations=function(a,b,c){var d,e,f;for(d=0,e=a.length;e>d;d++)f=a[d],1===f.nodeType&&"SOURCE"===f.nodeName.toUpperCase()&&h.addImgForSource(f,b,c)},h.addImgForSource=function(a,b,c){b&&"PICTURE"!==(b.nodeName||"").toUpperCase()&&(b=b.parentNode),b&&"PICTURE"===(b.nodeName||"").toUpperCase()&&h.addToElements(b.getElementsByTagName("img")[0],c)},h.addToElements=function(a,b){var c,d;if(a)if("length"in a&&!a.nodeType)for(c=0,d=a.length;d>c;c++)h.addToElements(a[c],b);else a.parentNode&&-1===b.indexOf(a)&&b.push(a)},h.onAttrChange=function(a,b){var c,d=a.target[h.ns];d||"srcset"!==a.attributeName||"IMG"!==a.target.nodeName.toUpperCase()?d&&(c=a.target.nodeName.toUpperCase(),"IMG"===c?(a.attributeName in d&&(d[a.attributeName]=void 0,("src"===a.attributeName||h.supSrcset&&"srcset"===a.attributeName)&&(d.curCan=null,d.curSrc=void 0)),h.addToElements(a.target,b)):"SOURCE"===c&&h.addImgForSource(a.target,a.target.parentNode,b)):h.addToElements(a.target,b)},window.HTMLPictureElement||(d&&!h.testMutationEvents?j=new d(h.onMutations):(l=function(){var a=!1,b=[],c=window.setImmediate||window.setTimeout;return function(d){a||(a=!0,l.take||(l.take=function(){b.length&&(h.onMutations(b),b=[]),a=!1}),c(l.take)),b.push(d)}}(),(b.body||b.documentElement).addEventListener("DOMNodeInserted",function(a){f.connected&&g&&l({type:"childList",addedNodes:[a.target],removedNodes:[]})},!0),(b.body||b.documentElement).addEventListener("DOMNodeRemoved",function(a){f.connected&&g&&l({type:"childList",addedNodes:[],removedNodes:[a.target]})},!0),(b.body||b.documentElement).addEventListener("DOMAttrModified",function(a){f.connected&&l({type:"attributes",target:a.target,attributeName:a.attrName})},!0)),window.HTMLImageElement&&Object.defineProperties&&!function(){var a=b.createElement("img"),c=a.getAttribute,d={src:1};h.supSrcset&&!h.supSizes&&(d.srcset=1),Object.defineProperties(window.HTMLImageElement.prototype,{getAttribute:{value:function(a){var b;return d[a]&&(b=this[h.ns])&&void 0!==b[a]?b[a]:c.apply(this,arguments)},writeable:!0,enumerable:!0,configurable:!0}})}(),f.start()),g||b.addEventListener("DOMContentLoaded",function(){g=!0}),f):f}); \ No newline at end of file diff --git a/plugins/perfselection/README.md b/plugins/perfselection/README.md index 374bcac..525c29b 100644 --- a/plugins/perfselection/README.md +++ b/plugins/perfselection/README.md @@ -3,17 +3,17 @@ While the normal smart selection algorithm does a great job in balancing performance vs. image quality the performance selection plugins hooks into the smart selection algorithm to greed for more performance on biased opinions. ##``respimage.config( "constrainDPI", true )`` -The ``"constrainDPI"`` option defaults to true. It is based on the biased opinion, that usually a normal image on a 2x retina device also looks good enough, if it is served with 1.6x quality. The plugin won't greed for more performance, if it assumes that a .gif, .png or .svg is used. Here is a demo: [normal smart selection](http://rawgit.com/aFarkas/respimage/stable/cfg/child.html) and [constrainDPI selection](http://rawgit.com/aFarkas/respimage/stable/cfg/child.html?perfselection). (In case you have only a 1x device, you wont see any differences). +The ``"constrainDPI"`` option defaults to true. It is based on the [biased opinion](http://www.quirksmode.org/blog/archives/2012/03/the_ipad_3_and.html), that usually a normal image on a 2x retina device also looks good enough, if it is served with 1.5x quality. The plugin won't greed for more performance, if it assumes that a .gif, .png or .svg is used. Here is a demo: [normal smart selection](http://rawgit.com/aFarkas/respimage/stable/cfg/child.html) and [constrainDPI selection](http://rawgit.com/aFarkas/respimage/stable/cfg/child.html?perfselection). (In case you have only a 1x device, you wont see any differences). ##``respimage.config( "lowbandwidth", true )`` The ``"lowbandwidth"`` option defaults to false. In case a developer knows or assumes that he visitor has a lowbandwidth, he can turn this option on. ```js respimage.config( "lowbandwidth", true ); -```` +``` -Note this wont turn on a feature detection. It will simply change the smart algorithm to search for lower resolution candidates. It is designed to be used in conjunction with the ``constrainDPI`` option. -Here is a demo: [normal smart selection](http://rawgit.com/aFarkas/respimage/stable/cfg/child.html) and [constrainDPI selection](http://rawgit.com/aFarkas/respimage/stable/cfg/child.html?lowbandwidth). +Note this won't turn on a feature detection. It will simply change the smart selection algorithm to search for lower resolution candidates. It is designed to be used in conjunction with the ``constrainDPI`` option. +Here is a demo: [normal smart selection](http://rawgit.com/aFarkas/respimage/stable/cfg/child.html) and [lowbandwidth selection](http://rawgit.com/aFarkas/respimage/stable/cfg/child.html?lowbandwidth). ##Download and embed Simply download the ``ri.perfselection.min.js`` and include it after the respimage script: diff --git a/plugins/perfselection/ri.perfselection.js b/plugins/perfselection/ri.perfselection.js index 0e70c9a..187aff8 100644 --- a/plugins/perfselection/ri.perfselection.js +++ b/plugins/perfselection/ri.perfselection.js @@ -23,10 +23,10 @@ var cfg = ri.cfg; var extraCfgs = { lowbandwidth: { - greed: 1.6, + greed: 2, tHigh: 0.6, tLow: 1.1, - xQuant: ri.DPR > 1 ? 0.85 : 0.95, + xQuant: ri.DPR > 1 ? 0.8 : 0.93, tLazy: 2 } }; @@ -66,8 +66,8 @@ }; extraCfgs.constrainDPI = { tHigh: 0.9, - xQuant: 0.97, - greed: 1.1 + xQuant: 0.95, + greed: 1.5 }; @@ -75,9 +75,9 @@ var set = candidates[0].set; var ret = ri.DPR * cfg.xQuant; if (cfg.constrainDPI && !isSharpType(set)) { - ret *= 0.87; - if ( ret > 1.6 ) { - ret = 1.6; + ret *= 0.85; + if ( ret > 1.5 ) { + ret = 1.5; } } return ret; diff --git a/plugins/perfselection/ri.perfselection.min.js b/plugins/perfselection/ri.perfselection.min.js index 7dcab23..b85062d 100644 --- a/plugins/perfselection/ri.perfselection.min.js +++ b/plugins/perfselection/ri.perfselection.min.js @@ -1,3 +1,3 @@ -/*! respimage - v0.9.3-RC1 - 2014-10-12 +/*! respimage - v0.9.3 - 2014-10-12 Licensed MIT */ -!function(a){"use strict";var b;if(window.respimage&&(b=a(window.respimage),a=function(){return b}),"function"==typeof define&&define.amd)require(["../../respimage"],a);else if("object"==typeof module&&"object"==typeof exports)module.exports=a(require("../../respimage"));else if(!window.respimage)throw"you need to include respimage"}(function(a){"use strict";var b=a._,c=a.config,d=b.cfg,e={lowbandwidth:{greed:1.6,tHigh:.6,tLow:1.1,xQuant:b.DPR>1?.85:.95,tLazy:2}},f=function(a,b){var c;for(c in b)a?d[c]*=b[c]:d[c]/=b[c]};d.lowbandwidth&&f(!0,e.lowbandwidth),a.config=function(a,b){return e[a]&&(b=!!b,b!=d[a]&&f(b,e[a])),c.apply(this,arguments)},b.DPR>1.2&&!function(){var a=/gif|png|svg/,c=/\.gif|\.png|\.svg/,g=function(b){return a.test(b.type||"")||c.test(b.srcset||b.src||"")};e.constrainDPI={tHigh:.9,xQuant:.97,greed:1.1},b.getX=function(a){var c=a[0].set,e=b.DPR*d.xQuant;return d.constrainDPI&&!g(c)&&(e*=.87,e>1.6&&(e=1.6)),e},d.constrainDPI=!0,f(!0,e.constrainDPI)}()}); \ No newline at end of file +!function(a){"use strict";var b;if(window.respimage&&(b=a(window.respimage),a=function(){return b}),"function"==typeof define&&define.amd)require(["../../respimage"],a);else if("object"==typeof module&&"object"==typeof exports)module.exports=a(require("../../respimage"));else if(!window.respimage)throw"you need to include respimage"}(function(a){"use strict";var b=a._,c=a.config,d=b.cfg,e={lowbandwidth:{greed:2,tHigh:.6,tLow:1.1,xQuant:b.DPR>1?.8:.93,tLazy:2}},f=function(a,b){var c;for(c in b)a?d[c]*=b[c]:d[c]/=b[c]};d.lowbandwidth&&f(!0,e.lowbandwidth),a.config=function(a,b){return e[a]&&(b=!!b,b!=d[a]&&f(b,e[a])),c.apply(this,arguments)},b.DPR>1.2&&!function(){var a=/gif|png|svg/,c=/\.gif|\.png|\.svg/,g=function(b){return a.test(b.type||"")||c.test(b.srcset||b.src||"")};e.constrainDPI={tHigh:.9,xQuant:.95,greed:1.5},b.getX=function(a){var c=a[0].set,e=b.DPR*d.xQuant;return d.constrainDPI&&!g(c)&&(e*=.85,e>1.5&&(e=1.5)),e},d.constrainDPI=!0,f(!0,e.constrainDPI)}()}); \ No newline at end of file diff --git a/respimage.dev.js b/respimage.dev.js index ce0e261..2466772 100644 --- a/respimage.dev.js +++ b/respimage.dev.js @@ -57,8 +57,6 @@ tHigh: 0.5, tLazy: 0.1, greed: 0.4 - //useGD: if set to true: always prefer gracefully degradation over polyfill - //,useGD: false }; var srcAttr = "data-risrc"; var srcsetAttr = srcAttr + "set"; @@ -859,12 +857,6 @@ } } - if ( imageData.src && ( (cfg.useGD && element.getAttribute("data-ri") == null) || element.getAttribute("data-no-ri") != null ) ) { - imageData.supported = true; - imageData.parsed = true; - return; - } - if ( imageData.srcset === undefined ) { srcsetAttribute = getImgAttr.call( element, "srcset" ); imageData.srcset = srcsetAttribute; diff --git a/respimage.js b/respimage.js index e3d2943..4e8ac25 100644 --- a/respimage.js +++ b/respimage.js @@ -1,4 +1,4 @@ -/*! respimage - v0.9.3-RC1 - 2014-10-12 +/*! respimage - v0.9.3 - 2014-10-12 Licensed MIT */ !function(window, document, undefined) { "use strict"; @@ -253,10 +253,9 @@ var alwaysCheckWDescriptor = ri.supSrcset && !ri.supSizes; ri.parseSets = function(element, parent) { var srcsetAttribute, fallbackCandidate, isWDescripor, srcsetParsed, hasPicture = "PICTURE" == parent.nodeName.toUpperCase(), imageData = element[ri.ns]; - return imageData.src === undefined && (imageData.src = getImgAttr.call(element, "src"), + imageData.src === undefined && (imageData.src = getImgAttr.call(element, "src"), imageData.src ? setImgAttr.call(element, srcAttr, imageData.src) : removeImgAttr.call(element, srcAttr)), - imageData.src && (cfg.useGD && null == element.getAttribute("data-ri") || null != element.getAttribute("data-no-ri")) ? (imageData.supported = !0, - void (imageData.parsed = !0)) : (imageData.srcset === undefined && (srcsetAttribute = getImgAttr.call(element, "srcset"), + imageData.srcset === undefined && (srcsetAttribute = getImgAttr.call(element, "srcset"), imageData.srcset = srcsetAttribute, srcsetParsed = !0), imageData.dims === undefined && (imageData.dims = getImgAttr.call(element, "height") && getImgAttr.call(element, "width")), imageData.sets = [], hasPicture && (imageData.pic = !0, getAllSourceElements(parent, imageData.sets)), imageData.srcset ? (fallbackCandidate = { @@ -269,7 +268,7 @@ sizes: null }), imageData.curCan = null, imageData.supported = !(hasPicture || fallbackCandidate && !ri.supSrcset || isWDescripor), srcsetParsed && ri.supSrcset && !imageData.supported && (srcsetAttribute ? (setImgAttr.call(element, srcsetAttr, srcsetAttribute), - element.srcset = "") : removeImgAttr.call(element, srcsetAttr)), void (imageData.parsed = !0)); + element.srcset = "") : removeImgAttr.call(element, srcsetAttr)), imageData.parsed = !0; }; var reevaluateAfterLoad = function() { var onload = function() { diff --git a/respimage.min.js b/respimage.min.js index bd14477..0035df7 100644 --- a/respimage.min.js +++ b/respimage.min.js @@ -1,3 +1,3 @@ -/*! respimage - v0.9.3-RC1 - 2014-10-12 +/*! respimage - v0.9.3 - 2014-10-12 Licensed MIT */ -!function(a,b,c){"use strict";function d(a){return a.trim?a.trim():a.replace(/^\s+|\s+$/g,"")}function e(){J=!1,u.vW=a.innerWidth||Math.max(A.offsetWidth||0,A.clientWidth||0),I=a.innerHeight||Math.max(A.offsetHeight||0,A.clientHeight||0)}function f(a){if(!(a in S)){var b={val:1,type:"x"},c=d(a||"");c&&(c.match(T)?(b.val=1*RegExp.$1,b.type=RegExp.$2):b=!1),S[a]=b}return S[a]}function g(a,b,c){return a/c>.2&&(a+=b*Y,b>$&&(a+=X)),a>c}function h(a){if(!a.getBoundingClientRect)return!0;var b,c,d,e,f=a.getBoundingClientRect();return!!((b=f.bottom)>=-9&&(e=f.top)<=I+9&&(c=f.right)>=-9&&(d=f.left)<=u.vW+9&&(b||c||d||e))}function i(a){var b,c=u.getSet(a),d=!1;"pending"!=c&&(d=!0,c&&(b=u.setRes(c),d=u.applySetCandidate(b,a))),a[u.ns].evaled=d}function j(a,b){return a.res-b.res}function k(a,b,c){var d;return!c&&b&&(c=a[u.ns].sets,c=c&&c[c.length-1]),d=l(b,c),d&&(b=u.makeUrl(b),a[u.ns].curSrc=b,a[u.ns].curCan=d,s||(a.currentSrc=b),d.res||p(d,d.set.sizes)),d}function l(a,b){var c,d,e;if(a&&b)for(e=u.parseSet(b),a=u.makeUrl(a),c=0;cc;c++)e=g[c],e[u.ns]=!0,f=e.getAttribute("srcset"),f&&b.push({srcset:f,media:e.getAttribute("media"),type:e.getAttribute("type"),sizes:e.getAttribute("sizes")})}function p(a,b){var c=a.desc;return"w"==c.type?(a.cWidth=u.calcListLength(b||"100vw"),a.res=c.val/a.cWidth):a.res=c.val,a}b.createElement("picture");var q,r,s,t,u={},v=function(){},w=b.createElement("img"),x=w.getAttribute,y=w.setAttribute,z=w.removeAttribute,A=b.documentElement,B={},C={addSize:!1,xQuant:1,tLow:.1,tHigh:.5,tLazy:.1,greed:.4},D="data-risrc",E=D+"set";u.ns=("ri"+(new Date).getTime()).substr(0,9),s="currentSrc"in w,t=s?"currentSrc":"src",u.supSrcset="srcset"in w,u.supSizes="sizes"in w,u.selShort="picture > img, img[srcset]",u.sel=u.selShort,u.cfg=C,u.supSrcset&&(u.sel+=", img["+E+"]");var F=b.createElement("a");u.makeUrl=function(a){return F.href=a,F.href},u.qsa=function(a,b){return a.querySelectorAll(b)};var G=(a.console&&"function"==typeof console.warn?function(a){console.warn(a)}:v,function(a,b,c,d){a.addEventListener?a.addEventListener(b,c,d||!1):a.attachEvent&&a.attachEvent("on"+b,c)}),H=function(a,b,c,d){a.removeEventListener?a.removeEventListener(b,c,d||!1):a.detachEvent&&a.detachEvent("on"+b,c)};"https:"==location.protocol,u.matchesMedia=function(){return u.matchesMedia=a.matchMedia&&(matchMedia("(min-width: 0.1em)")||{}).matches?function(a){return!a||matchMedia(a).matches}:u.mMQ,u.matchesMedia.apply(this,arguments)},u.vW=0;var I,J=!0,K={minw:/\(\s*min\-width\s*:\s*(\s*[0-9\.]+)(px|em)\s*\)/,maxw:/\(\s*max\-width\s*:\s*(\s*[0-9\.]+)(px|em)\s*\)/},L={};u.mMQ=function(a){var b,c,d=!1;return a?(L[a]||(b=a.match(K.minw)&&parseFloat(RegExp.$1)+(RegExp.$2||""),c=a.match(K.maxw)&&parseFloat(RegExp.$1)+(RegExp.$2||""),b&&(b=parseFloat(b,10)*(b.indexOf("em")>0?u.getEmValue():1)),c&&(c=parseFloat(c,10)*(c.indexOf("em")>0?u.getEmValue():1)),L[a]={min:b,max:c}),b=L[a].min,c=L[a].max,(b&&u.vW>=b||c&&u.vW<=c)&&(d=!0),d):!0},u.DPR=a.devicePixelRatio||1;var M={},N=/^([\d\.]+)(em|vw|px)$/,O="position:absolute;left:0;visibility:hidden;display:block;padding:0;border:none;font-size:1em;width:1em;";u.calcLength=function(a){var c,d,e=a,f=!1;if(!(e in M)){if(d=a.match(N))d[1]=parseFloat(d[1],10),f=d[1]?"vw"==d[2]?u.vW*d[1]/100:"em"==d[2]?u.getEmValue()*d[1]:d[1]:!1;else if(a.indexOf("calc")>-1||parseInt(a,10)){a=a.replace("vw","%"),r||(r=b.createElement("div"),r.style.cssText=O),q||(q=!0,A.insertBefore(r,A.firstChild)),r.style.width="0px";try{r.style.width=a}catch(g){c=!0}f=r.offsetWidth,c&&(f=!1)}0>=f&&(f=!1),M[e]=f}return M[e]},u.types=B,B["image/jpeg"]=!0,B["image/gif"]=!0,B["image/png"]=!0,B["image/svg+xml"]=b.implementation.hasFeature("http://wwwindow.w3.org/TR/SVG11/feature#Image","1.1"),u.supportsType=function(a){return a?B[a]:!0};var P=/(\([^)]+\))?\s*(.+)/,Q={};u.parseSize=function(a){var b;return Q[a]||(b=(a||"").match(P),Q[a]={media:b&&b[1],length:b&&b[2]}),Q[a]},u.parseSet=function(a){if(!a.cands){var b,c,d,e,g,h=a.srcset;for(a.cands=[];h;)h=h.replace(/^\s+/g,""),b=h.search(/\s/g),d=null,-1!=b?(c=h.slice(0,b),e=c.charAt(c.length-1),","!=e&&c||(c=c.replace(/,+$/,""),d=""),h=h.slice(b+1),null==d&&(g=h.indexOf(","),-1!=g?(d=h.slice(0,g),h=h.slice(g+1)):(d=h,h=""))):(c=h,h=""),c&&(d=f(d))&&a.cands.push({url:c.replace(/^,+/,""),desc:d,set:a})}return a.cands};var R,S={},T=/^([\+eE\d\.]+)(w|x)$/,U="font-size:100% !important;";u.getEmValue=function(){var a;if(!R&&(a=b.body)){var c=b.createElement("div"),d=A.style.cssText,e=a.style.cssText;c.style.cssText=O,A.style.cssText=U,a.style.cssText=U,a.appendChild(c),R=c.offsetWidth,a.removeChild(c),R=parseFloat(R,10),A.style.cssText=d,a.style.cssText=e}return R||16};var V={};u.calcListLength=function(a){if(!(a in V)||C.noCache){var b,c,e,f,g,h,i=d(a).split(/\s*,\s*/),j=!1;for(g=0,h=i.length;h>g&&(b=i[g],c=u.parseSize(b),e=c.length,f=c.media,!e||!u.matchesMedia(f)||(j=u.calcLength(e))===!1);g++);V[a]=j?j:u.vW}return V[a]},u.setRes=function(a){var b,c;if(a){b=u.parseSet(a);for(var d=0,e=b.length;e>d;d++)c=b[d],c.descriptor||p(c,a.sizes)}return b};var W,X,Y,Z,$,_;u.applySetCandidate=function(a,b){if(a.length){var c,d,e,f,i,l,m,n,o,p,q,r=b[u.ns],v=!0;if(n=r.curSrc||b[t],o=r.curCan||k(b,n,a[0].set),d=u.getX(a,o),n&&(o&&(o.res+=Z),p=!r.pic||o&&o.set==a[0].set,o&&p&&o.res>=d?m=o:b.complete||r.src!=x.call(b,"src")||(p||!_&&!h(b))&&(m=o,q=n,v="lazy",_&&cb(b))),!m)for(a.sort(j),l=a.length,m=a[l-1],e=0;l>e;e++)if(c=a[e],c.res>=d){f=e-1,m=a[f]&&(i=c.res-d)&&n!=u.makeUrl(c.url)&&g(a[f].res,i,d)?a[f]:c;break}return m&&(q=u.makeUrl(m.url),s||(b.currentSrc=q),r.curSrc=q,r.curCan=m,q!=n?u.setSrc(b,m):u.setSize(b)),v}},u.getX=function(){return u.DPR*C.xQuant},u.setSrc=function(a,b){var c;a.src=b.url,"image/svg+xml"==b.set.type&&(c=a.style.width,a.style.width=a.offsetWidth+1+"px",a.offsetWidth+1&&(a.style.width=c))};var ab=function(){H(this,"load",ab),u.setSize(this)};u.setSize=function(a){var b,c=a[u.ns].curCan;C.addSize&&c&&!a[u.ns].dims&&(a.complete||(H(a,"load",ab),G(a,"load",ab)),b=a.naturalWidth,b&&("x"==c.desc.type?y.call(a,"width",parseInt(b/c.res/C.xQuant,10)):"w"==c.desc.type&&y.call(a,"width",parseInt(c.cWidth*(b/c.desc.val),10))))},b.addEventListener&&"naturalWidth"in w&&"complete"in w||(u.setSize=v),u.getSet=function(a){var b,c,d,e=!1,f=a[u.ns].sets;for(b=0;bd;d++)u.fillImg(c[d],f);u.teardownRun(f)}};u.fillImgs=fb,a.HTMLPictureElement?(fb=v,u.fillImg=v):!function(){var c=/^loade|^c/,d=function(){clearTimeout(g),g=setTimeout(d,3e3),b.body&&(c.test(b.readyState||"")&&(_=!0,clearTimeout(g),H(b,"readystatechange",d)),u.fillImgs())},e=function(){u.fillImgs({reevaluate:!0})},f=function(){clearTimeout(db),J=!0,db=setTimeout(e,99)},g=setTimeout(d,b.body?9:99);G(a,"resize",f),G(b,"readystatechange",d)}(),fb._=u,fb.config=function(a,b,c){if("addType"==a){if(B[b]=c,"pending"==c)return}else C[a]=b;eb&&u.fillImgs({reevaluate:!0})},a.respimage=fb,"object"==typeof module&&"object"==typeof module.exports?module.exports=fb:"function"==typeof define&&define.amd&&define(function(){return fb})}(window,document); \ No newline at end of file +!function(a,b,c){"use strict";function d(a){return a.trim?a.trim():a.replace(/^\s+|\s+$/g,"")}function e(){J=!1,u.vW=a.innerWidth||Math.max(A.offsetWidth||0,A.clientWidth||0),I=a.innerHeight||Math.max(A.offsetHeight||0,A.clientHeight||0)}function f(a){if(!(a in S)){var b={val:1,type:"x"},c=d(a||"");c&&(c.match(T)?(b.val=1*RegExp.$1,b.type=RegExp.$2):b=!1),S[a]=b}return S[a]}function g(a,b,c){return a/c>.2&&(a+=b*Y,b>$&&(a+=X)),a>c}function h(a){if(!a.getBoundingClientRect)return!0;var b,c,d,e,f=a.getBoundingClientRect();return!!((b=f.bottom)>=-9&&(e=f.top)<=I+9&&(c=f.right)>=-9&&(d=f.left)<=u.vW+9&&(b||c||d||e))}function i(a){var b,c=u.getSet(a),d=!1;"pending"!=c&&(d=!0,c&&(b=u.setRes(c),d=u.applySetCandidate(b,a))),a[u.ns].evaled=d}function j(a,b){return a.res-b.res}function k(a,b,c){var d;return!c&&b&&(c=a[u.ns].sets,c=c&&c[c.length-1]),d=l(b,c),d&&(b=u.makeUrl(b),a[u.ns].curSrc=b,a[u.ns].curCan=d,s||(a.currentSrc=b),d.res||p(d,d.set.sizes)),d}function l(a,b){var c,d,e;if(a&&b)for(e=u.parseSet(b),a=u.makeUrl(a),c=0;cc;c++)e=g[c],e[u.ns]=!0,f=e.getAttribute("srcset"),f&&b.push({srcset:f,media:e.getAttribute("media"),type:e.getAttribute("type"),sizes:e.getAttribute("sizes")})}function p(a,b){var c=a.desc;return"w"==c.type?(a.cWidth=u.calcListLength(b||"100vw"),a.res=c.val/a.cWidth):a.res=c.val,a}b.createElement("picture");var q,r,s,t,u={},v=function(){},w=b.createElement("img"),x=w.getAttribute,y=w.setAttribute,z=w.removeAttribute,A=b.documentElement,B={},C={addSize:!1,xQuant:1,tLow:.1,tHigh:.5,tLazy:.1,greed:.4},D="data-risrc",E=D+"set";u.ns=("ri"+(new Date).getTime()).substr(0,9),s="currentSrc"in w,t=s?"currentSrc":"src",u.supSrcset="srcset"in w,u.supSizes="sizes"in w,u.selShort="picture > img, img[srcset]",u.sel=u.selShort,u.cfg=C,u.supSrcset&&(u.sel+=", img["+E+"]");var F=b.createElement("a");u.makeUrl=function(a){return F.href=a,F.href},u.qsa=function(a,b){return a.querySelectorAll(b)};var G=(a.console&&"function"==typeof console.warn?function(a){console.warn(a)}:v,function(a,b,c,d){a.addEventListener?a.addEventListener(b,c,d||!1):a.attachEvent&&a.attachEvent("on"+b,c)}),H=function(a,b,c,d){a.removeEventListener?a.removeEventListener(b,c,d||!1):a.detachEvent&&a.detachEvent("on"+b,c)};"https:"==location.protocol,u.matchesMedia=function(){return u.matchesMedia=a.matchMedia&&(matchMedia("(min-width: 0.1em)")||{}).matches?function(a){return!a||matchMedia(a).matches}:u.mMQ,u.matchesMedia.apply(this,arguments)},u.vW=0;var I,J=!0,K={minw:/\(\s*min\-width\s*:\s*(\s*[0-9\.]+)(px|em)\s*\)/,maxw:/\(\s*max\-width\s*:\s*(\s*[0-9\.]+)(px|em)\s*\)/},L={};u.mMQ=function(a){var b,c,d=!1;return a?(L[a]||(b=a.match(K.minw)&&parseFloat(RegExp.$1)+(RegExp.$2||""),c=a.match(K.maxw)&&parseFloat(RegExp.$1)+(RegExp.$2||""),b&&(b=parseFloat(b,10)*(b.indexOf("em")>0?u.getEmValue():1)),c&&(c=parseFloat(c,10)*(c.indexOf("em")>0?u.getEmValue():1)),L[a]={min:b,max:c}),b=L[a].min,c=L[a].max,(b&&u.vW>=b||c&&u.vW<=c)&&(d=!0),d):!0},u.DPR=a.devicePixelRatio||1;var M={},N=/^([\d\.]+)(em|vw|px)$/,O="position:absolute;left:0;visibility:hidden;display:block;padding:0;border:none;font-size:1em;width:1em;";u.calcLength=function(a){var c,d,e=a,f=!1;if(!(e in M)){if(d=a.match(N))d[1]=parseFloat(d[1],10),f=d[1]?"vw"==d[2]?u.vW*d[1]/100:"em"==d[2]?u.getEmValue()*d[1]:d[1]:!1;else if(a.indexOf("calc")>-1||parseInt(a,10)){a=a.replace("vw","%"),r||(r=b.createElement("div"),r.style.cssText=O),q||(q=!0,A.insertBefore(r,A.firstChild)),r.style.width="0px";try{r.style.width=a}catch(g){c=!0}f=r.offsetWidth,c&&(f=!1)}0>=f&&(f=!1),M[e]=f}return M[e]},u.types=B,B["image/jpeg"]=!0,B["image/gif"]=!0,B["image/png"]=!0,B["image/svg+xml"]=b.implementation.hasFeature("http://wwwindow.w3.org/TR/SVG11/feature#Image","1.1"),u.supportsType=function(a){return a?B[a]:!0};var P=/(\([^)]+\))?\s*(.+)/,Q={};u.parseSize=function(a){var b;return Q[a]||(b=(a||"").match(P),Q[a]={media:b&&b[1],length:b&&b[2]}),Q[a]},u.parseSet=function(a){if(!a.cands){var b,c,d,e,g,h=a.srcset;for(a.cands=[];h;)h=h.replace(/^\s+/g,""),b=h.search(/\s/g),d=null,-1!=b?(c=h.slice(0,b),e=c.charAt(c.length-1),","!=e&&c||(c=c.replace(/,+$/,""),d=""),h=h.slice(b+1),null==d&&(g=h.indexOf(","),-1!=g?(d=h.slice(0,g),h=h.slice(g+1)):(d=h,h=""))):(c=h,h=""),c&&(d=f(d))&&a.cands.push({url:c.replace(/^,+/,""),desc:d,set:a})}return a.cands};var R,S={},T=/^([\+eE\d\.]+)(w|x)$/,U="font-size:100% !important;";u.getEmValue=function(){var a;if(!R&&(a=b.body)){var c=b.createElement("div"),d=A.style.cssText,e=a.style.cssText;c.style.cssText=O,A.style.cssText=U,a.style.cssText=U,a.appendChild(c),R=c.offsetWidth,a.removeChild(c),R=parseFloat(R,10),A.style.cssText=d,a.style.cssText=e}return R||16};var V={};u.calcListLength=function(a){if(!(a in V)||C.noCache){var b,c,e,f,g,h,i=d(a).split(/\s*,\s*/),j=!1;for(g=0,h=i.length;h>g&&(b=i[g],c=u.parseSize(b),e=c.length,f=c.media,!e||!u.matchesMedia(f)||(j=u.calcLength(e))===!1);g++);V[a]=j?j:u.vW}return V[a]},u.setRes=function(a){var b,c;if(a){b=u.parseSet(a);for(var d=0,e=b.length;e>d;d++)c=b[d],c.descriptor||p(c,a.sizes)}return b};var W,X,Y,Z,$,_;u.applySetCandidate=function(a,b){if(a.length){var c,d,e,f,i,l,m,n,o,p,q,r=b[u.ns],v=!0;if(n=r.curSrc||b[t],o=r.curCan||k(b,n,a[0].set),d=u.getX(a,o),n&&(o&&(o.res+=Z),p=!r.pic||o&&o.set==a[0].set,o&&p&&o.res>=d?m=o:b.complete||r.src!=x.call(b,"src")||(p||!_&&!h(b))&&(m=o,q=n,v="lazy",_&&cb(b))),!m)for(a.sort(j),l=a.length,m=a[l-1],e=0;l>e;e++)if(c=a[e],c.res>=d){f=e-1,m=a[f]&&(i=c.res-d)&&n!=u.makeUrl(c.url)&&g(a[f].res,i,d)?a[f]:c;break}return m&&(q=u.makeUrl(m.url),s||(b.currentSrc=q),r.curSrc=q,r.curCan=m,q!=n?u.setSrc(b,m):u.setSize(b)),v}},u.getX=function(){return u.DPR*C.xQuant},u.setSrc=function(a,b){var c;a.src=b.url,"image/svg+xml"==b.set.type&&(c=a.style.width,a.style.width=a.offsetWidth+1+"px",a.offsetWidth+1&&(a.style.width=c))};var ab=function(){H(this,"load",ab),u.setSize(this)};u.setSize=function(a){var b,c=a[u.ns].curCan;C.addSize&&c&&!a[u.ns].dims&&(a.complete||(H(a,"load",ab),G(a,"load",ab)),b=a.naturalWidth,b&&("x"==c.desc.type?y.call(a,"width",parseInt(b/c.res/C.xQuant,10)):"w"==c.desc.type&&y.call(a,"width",parseInt(c.cWidth*(b/c.desc.val),10))))},b.addEventListener&&"naturalWidth"in w&&"complete"in w||(u.setSize=v),u.getSet=function(a){var b,c,d,e=!1,f=a[u.ns].sets;for(b=0;bd;d++)u.fillImg(c[d],f);u.teardownRun(f)}};u.fillImgs=fb,a.HTMLPictureElement?(fb=v,u.fillImg=v):!function(){var c=/^loade|^c/,d=function(){clearTimeout(g),g=setTimeout(d,3e3),b.body&&(c.test(b.readyState||"")&&(_=!0,clearTimeout(g),H(b,"readystatechange",d)),u.fillImgs())},e=function(){u.fillImgs({reevaluate:!0})},f=function(){clearTimeout(db),J=!0,db=setTimeout(e,99)},g=setTimeout(d,b.body?9:99);G(a,"resize",f),G(b,"readystatechange",d)}(),fb._=u,fb.config=function(a,b,c){if("addType"==a){if(B[b]=c,"pending"==c)return}else C[a]=b;eb&&u.fillImgs({reevaluate:!0})},a.respimage=fb,"object"==typeof module&&"object"==typeof module.exports?module.exports=fb:"function"==typeof define&&define.amd&&define(function(){return fb})}(window,document); \ No newline at end of file diff --git a/tests/index.html b/tests/index.html index 199ba00..8fa36a3 100644 --- a/tests/index.html +++ b/tests/index.html @@ -37,7 +37,7 @@ diff --git a/tests/tests.js b/tests/tests.js index 6eb1749..625390f 100644 --- a/tests/tests.js +++ b/tests/tests.js @@ -131,7 +131,7 @@ return 360; }; - + window.respimage( { reevaluate: true } ); setTimeout(function(){ if ( !op.supSizes ) { window.respimage( { reevaluate: true } );