diff --git a/README.md b/README.md index 7403f45..a16944c 100644 --- a/README.md +++ b/README.md @@ -124,9 +124,6 @@ The `xQuant` option can be adjusted for testing or in conjunction with feature d ###Troubleshooting and bug reporting In case of any problems include the **respimage.dev.js** into your project and open your JS console. In case you think you have found a bug, please create a testcase and then report your issue. Note: You should not use the dev build inside your production environment, because it is a lot slower. -##Comparison to picturefill 2.1/2.2-pre -``respimage`` is a performance improved (especially network performance) variant of the famous ``picturefill`` polyfill with many additional bugfixes. It includes more than 20 bugfixes compared to the normal ``picturefill`` polyfill and also adds fundamental improvements in standards support, saves bandwidth through intelligent resource selection algorithms and has its code coverage over 80%. It's simply a ``picturefill`` on steroids. In case you are not convinced, [read this](how-respimg-works.md) or [test here](http://afarkas.github.io/responsive-image-race/). - ##The [Mutation - Plugin](plugins/mutation) This plugin automatically detects new responsive images and also changes to srcset/media and sizes attributes. diff --git a/bower.json b/bower.json index 13d8e10..7d652fe 100644 --- a/bower.json +++ b/bower.json @@ -1,7 +1,7 @@ { "name": "respimage", "repo": "afarkas/respimage", - "version": "0.9.1-pre", + "version": "0.9.1", "main": "respimage.min.js", "scripts": [ "respimage.min.js" diff --git a/cfg/child.html b/cfg/child.html index 775d44c..99066cb 100644 --- a/cfg/child.html +++ b/cfg/child.html @@ -32,7 +32,6 @@ - + -
-
-
smart candidate selection for responsive images
-
-
-
- config candidate selection -
-
-
- - -

xQuant will be multiplied with your devicePixelRatio. Hint: If you are using a 2dpr device you can set 0.5 to simulate 1dpr device.

-
+
+
+
smart candidate selection for responsive images
+
+ +
+ config candidate selection +
+
+
+ + +

xQuant will be multiplied with your devicePixelRatio. Hint: If you are using a 2dpr device you can set 0.5 to simulate 1dpr device.

-
-
-
- - -

greed is multiplied with the useless extra pixels of a source candidate and "added" to the next lowres candidate.

-
+
+
+
+
+ + +

greed is multiplied with the useless extra pixels of a source candidate and "added" to the next lowres candidate.

- +
+ other configs +
@@ -74,44 +81,46 @@
-
-
-
-
- -
+ +
+
+
+
+
-
-
-
- - -
-
-
- -
-

Wether viewport should be changed while dragging (input/checked) or on drag release (change/unchecked).

+
+
+
+
+ + +
+
+
+
+

Wether viewport should be changed while dragging (input/checked) or on drag release (change/unchecked).

- -
+
+
+
- + +
diff --git a/cfg/js/child.js b/cfg/js/child.js deleted file mode 100644 index c664e6a..0000000 --- a/cfg/js/child.js +++ /dev/null @@ -1,4 +0,0 @@ -(function(window, document){ - 'use strict'; - -})(window, document); diff --git a/cfg/js/parent.js b/cfg/js/parent.js index 461524c..d3a2931 100644 --- a/cfg/js/parent.js +++ b/cfg/js/parent.js @@ -9,11 +9,16 @@ }); - webshim.polyfill('forms forms-ext'); + webshim.polyfill('forms forms-ext details'); $(function(){ var oninput; + var o = window.respimage._.cfg; + + $.each(o, function(name, value){ + $('#'+name).val(value); + }); $('#vw-input') .on('change.smooth-vwchange', function(){ @@ -33,6 +38,7 @@ $('#arena').removeAttr('src').prop('src', 'javascript:false'); + $('.arena-config').on('submit', function(){ var data = $(this).serialize(); $('#arena').prop('src', 'child.html?' + data); diff --git a/component.json b/component.json index 4494517..8c23340 100644 --- a/component.json +++ b/component.json @@ -1,6 +1,6 @@ { "name": "respimage", - "version": "0.9.1-pre", + "version": "0.9.1", "repo": "afarkas/respimage", "main": "respimage.min.js", "scripts": ["respimage.min.js"], diff --git a/how-respimg-works.md b/how-respimg-works.md index 545163c..73bfb5e 100644 --- a/how-respimg-works.md +++ b/how-respimg-works.md @@ -63,7 +63,7 @@ What ``respimage``'s resource selection is doing is quite simple. It searches fo Here is a simple [demo](http://codepen.io/aFarkas/full/tplJE/). -Although the example above is constructed, this simple and basic technique can save a lot of bandwidth with real images and realistic sizes: [comparison polyfill demo](http://afarkas.github.io/responsive-image-race/)). +Although the example above is constructed, this simple and basic technique can save a lot of bandwidth with real images and realistic sizes: [smart selection demo](http://rawgit.com/aFarkas/respimage/stable/cfg/index.html)). Note: That ``respimage`` does only work in browsers, which do not support the srcset attribute natively. This means you should not use Chrome for the examples above. diff --git a/package.json b/package.json index 4f9bd9c..01e3987 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "respimage", - "version": "0.9.1-pre", + "version": "0.9.1", "engines": { "node": ">= 0.8.0" }, diff --git a/plugins/mutation/ri.mutation.min.js b/plugins/mutation/ri.mutation.min.js index 2ef8a40..bf54363 100644 --- a/plugins/mutation/ri.mutation.min.js +++ b/plugins/mutation/ri.mutation.min.js @@ -1,3 +1,3 @@ -/*! respimage - v0.9.1-pre - 2014-10-08 +/*! respimage - v0.9.1 - 2014-10-09 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/respimage.dev.js b/respimage.dev.js index 227310d..5f25d90 100644 --- a/respimage.dev.js +++ b/respimage.dev.js @@ -32,7 +32,7 @@ tLow: 0.1, tHigh: 0.5, tLazy: 0.25, - greed: 0.2 + greed: 0.3 }; var highBandwidth = { xQuant: 1, @@ -46,14 +46,14 @@ tLow: 0.2, tHigh: 0.4, tLazy: 0.4, - greed: 0.3 + greed: 0.5 }; */ var cfg = { addSize: false, //resource selection: xQuant: 1, - tLow: 0.2, + tLow: 0.1, tHigh: 0.5, tLazy: 0.1, greed: 0.3 @@ -599,10 +599,15 @@ curCan.res += tLazy; } - // if image isn't loaded (!complete + src), test for LQIP - // note: this will fail if the src has an error - if ( !img.complete && imageData.src == getImgAttr.call( img, "src" ) ) { - isSameSet = !imageData.pic || (curCan && curCan.set == candidates[ 0 ].set); + isSameSet = !imageData.pic || (curCan && curCan.set == candidates[ 0 ].set); + + if (curCan && isSameSet && curCan.res >= dpr ) { + bestCandidate = curCan; + + // if image isn't loaded (!complete + src), test for LQIP + // note: this will fail if the src has an error + } else if ( !img.complete && imageData.src == getImgAttr.call( img, "src" ) ) { + //if there is no art direction or if the img isn't visible, we can use LQIP pattern if ( isSameSet || (!isWinComplete && !inView( img )) ) { bestCandidate = curCan; @@ -1016,7 +1021,7 @@ ri.setupRun = function( options ) { if ( !alreadyRun || options.reevaluate ) { - dprM = Math.min(Math.max(ri.DPR * cfg.xQuant, 1), 1.8); + dprM = Math.min(Math.max(ri.DPR * cfg.xQuant, 1.4), 1.8); tLow = cfg.tLow * dprM; tLazy = cfg.tLazy * dprM; greed = cfg.greed * dprM; diff --git a/respimage.js b/respimage.js index b4a04fb..57c6946 100644 --- a/respimage.js +++ b/respimage.js @@ -1,4 +1,4 @@ -/*! respimage - v0.9.1-pre - 2014-10-08 +/*! respimage - v0.9.1 - 2014-10-09 Licensed MIT */ !function(window, document, undefined) { "use strict"; @@ -77,7 +77,7 @@ var lengthElInstered, lengthEl, currentSrcSupported, curSrcProp, ri = {}, noop = function() {}, image = document.createElement("img"), getImgAttr = image.getAttribute, setImgAttr = image.setAttribute, removeImgAttr = image.removeAttribute, docElem = document.documentElement, types = {}, cfg = { addSize: !1, xQuant: 1, - tLow: .2, + tLow: .1, tHigh: .5, tLazy: .1, greed: .3 @@ -205,10 +205,11 @@ if (candidates.length) { var candidate, i, j, diff, length, bestCandidate, curSrc, curCan, isSameSet, candidateSrc, imageData = img[ri.ns], dpr = ri.DPR * cfg.xQuant, evaled = !0; if (curSrc = imageData.curSrc || img[curSrcProp], curCan = imageData.curCan || setSrcToCur(img, curSrc, candidates[0].set), - curSrc && (curCan && (curCan.res += tLazy), img.complete || imageData.src != getImgAttr.call(img, "src") || (isSameSet = !imageData.pic || curCan && curCan.set == candidates[0].set, - (isSameSet || !isWinComplete && !inView(img)) && (bestCandidate = curCan, candidateSrc = curSrc, - evaled = "lazy", isWinComplete && reevaluateAfterLoad(img)))), !bestCandidate) for (candidates.sort(ascendingSort), - length = candidates.length, bestCandidate = candidates[length - 1], i = 0; length > i; i++) if (candidate = candidates[i], + curSrc && (curCan && (curCan.res += tLazy), isSameSet = !imageData.pic || curCan && curCan.set == candidates[0].set, + curCan && isSameSet && curCan.res >= dpr ? bestCandidate = curCan : img.complete || imageData.src != getImgAttr.call(img, "src") || (isSameSet || !isWinComplete && !inView(img)) && (bestCandidate = curCan, + candidateSrc = curSrc, evaled = "lazy", isWinComplete && reevaluateAfterLoad(img))), + !bestCandidate) for (candidates.sort(ascendingSort), length = candidates.length, + bestCandidate = candidates[length - 1], i = 0; length > i; i++) if (candidate = candidates[i], candidate.res >= dpr) { j = i - 1, bestCandidate = candidates[j] && (diff = candidate.res - dpr) && curSrc != ri.makeUrl(candidate.url) && chooseLowRes(candidates[j].res, diff, dpr) ? candidates[j] : candidate; break; @@ -282,7 +283,7 @@ }; var resizeThrottle; ri.setupRun = function(options) { - (!alreadyRun || options.reevaluate) && (dprM = Math.min(Math.max(ri.DPR * cfg.xQuant, 1), 1.8), + (!alreadyRun || options.reevaluate) && (dprM = Math.min(Math.max(ri.DPR * cfg.xQuant, 1.4), 1.8), tLow = cfg.tLow * dprM, tLazy = cfg.tLazy * dprM, greed = cfg.greed * dprM, tHigh = cfg.tHigh * dprM), isVwDirty && (lengthCache = {}, sizeLengthCache = {}, updateView(), options.elements || options.context || clearTimeout(resizeThrottle)); }, ri.teardownRun = function() { diff --git a/respimage.min.js b/respimage.min.js index 023f69b..f97ea69 100644 --- a/respimage.min.js +++ b/respimage.min.js @@ -1,3 +1,3 @@ -/*! respimage - v0.9.1-pre - 2014-10-08 +/*! respimage - v0.9.1 - 2014-10-09 Licensed MIT */ -!function(a,b,c){"use strict";function d(a){return a.trim?a.trim():a.replace(/^\s+|\s+$/g,"")}function e(){I=!1,t.vW=a.innerWidth||Math.max(z.offsetWidth||0,z.clientWidth||0),H=a.innerHeight||Math.max(z.offsetHeight||0,z.clientHeight||0)}function f(a){if(!(a in R)){var b={val:1,type:"x"},c=d(a||"");c&&(c.match(S)?(b.val=1*RegExp.$1,b.type=RegExp.$2):b=!1),R[a]=b}return R[a]}function g(a,b,c){return a/c>.2&&(a+=b*X,b>Z&&(a+=W)),a>c}function h(a){if(!a.getBoundingClientRect)return!0;var b,c,d=a.getBoundingClientRect();return d.top>=0&&(b=d.bottom)<=H&&d.left>=0&&(c=d.right)<=t.vW&&(b||c)}function i(a){var b,c=t.getSet(a),d=!1;"pending"!=c&&(d=!0,c&&(b=t.setRes(c),d=t.applySetCandidate(b,a))),a[t.ns].evaled=d}function j(a,b){return a.res-b.res}function k(a,b,c){var d;return!c&&b&&(c=a[t.ns].sets,c=c&&c[c.length-1]),d=l(b,c),d&&(b=t.makeUrl(b),a[t.ns].curSrc=b,a[t.ns].curCan=d,r||(a.currentSrc=b),d.res||o(d,d.set.sizes)),d}function l(a,b){var c,d,e;if(a&&b)for(e=t.parseSet(b),a=t.makeUrl(a),c=0;cc;c++)e=g[c],e[t.ns]=!0,f=e.getAttribute("srcset"),f&&b.push({srcset:f,media:e.getAttribute("media"),type:e.getAttribute("type"),sizes:e.getAttribute("sizes")})}function o(a,b){var c=a.desc;return"w"==c.type?(a.cWidth=t.calcListLength(b||"100vw"),a.res=c.val/a.cWidth):a.res=c.val,a}b.createElement("picture");var p,q,r,s,t={},u=function(){},v=b.createElement("img"),w=v.getAttribute,x=v.setAttribute,y=v.removeAttribute,z=b.documentElement,A={},B={addSize:!1,xQuant:1,tLow:.2,tHigh:.5,tLazy:.1,greed:.3},C="data-risrc",D=C+"set";t.ns=("ri"+(new Date).getTime()).substr(0,9),r="currentSrc"in v,s=r?"currentSrc":"src",t.supSrcset="srcset"in v,t.supSizes="sizes"in v,t.selShort="picture > img, img[srcset]",t.sel=t.selShort,t.cfg=B,t.supSrcset&&(t.sel+=", img["+D+"]");var E=b.createElement("a");t.makeUrl=function(a){return E.href=a,E.href},t.qsa=function(a,b){return a.querySelectorAll(b)};var F=(a.console&&"function"==typeof console.warn?function(a){console.warn(a)}:u,function(a,b,c,d){a.addEventListener?a.addEventListener(b,c,d||!1):a.attachEvent&&a.attachEvent("on"+b,c)}),G=function(a,b,c,d){a.removeEventListener?a.removeEventListener(b,c,d||!1):a.detachEvent&&a.detachEvent("on"+b,c)};"https:"==location.protocol,t.matchesMedia=function(){return t.matchesMedia=a.matchMedia&&(matchMedia("(min-width: 0.1em)")||{}).matches?function(a){return!a||matchMedia(a).matches}:t.mMQ,t.matchesMedia.apply(this,arguments)},t.vW=0;var H,I=!0,J={minw:/\(\s*min\-width\s*:\s*(\s*[0-9\.]+)(px|em)\s*\)/,maxw:/\(\s*max\-width\s*:\s*(\s*[0-9\.]+)(px|em)\s*\)/},K={};t.mMQ=function(a){var b,c,d=!1;return a?(K[a]||(b=a.match(J.minw)&&parseFloat(RegExp.$1)+(RegExp.$2||""),c=a.match(J.maxw)&&parseFloat(RegExp.$1)+(RegExp.$2||""),b&&(b=parseFloat(b,10)*(b.indexOf("em")>0?t.getEmValue():1)),c&&(c=parseFloat(c,10)*(c.indexOf("em")>0?t.getEmValue():1)),K[a]={min:b,max:c}),b=K[a].min,c=K[a].max,(b&&t.vW>=b||c&&t.vW<=c)&&(d=!0),d):!0},t.DPR=a.devicePixelRatio||1;var L={},M=/^([\d\.]+)(em|vw|px)$/,N="position:absolute;left:0;visibility:hidden;display:block;padding:0;border:none;font-size:1em;width:1em;";t.calcLength=function(a){var c,d,e=a,f=!1;if(!(e in L)){if(d=a.match(M))d[1]=parseFloat(d[1],10),f=d[1]?"vw"==d[2]?t.vW*d[1]/100:"em"==d[2]?t.getEmValue()*d[1]:d[1]:!1;else if(a.indexOf("calc")>-1||parseInt(a,10)){a=a.replace("vw","%"),q||(q=b.createElement("div"),q.style.cssText=N),p||(p=!0,z.insertBefore(q,z.firstChild)),q.style.width="0px";try{q.style.width=a}catch(g){c=!0}f=q.offsetWidth,c&&(f=!1)}0>=f&&(f=!1),L[e]=f}return L[e]},t.types=A,A["image/jpeg"]=!0,A["image/gif"]=!0,A["image/png"]=!0,A["image/svg+xml"]=b.implementation.hasFeature("http://wwwindow.w3.org/TR/SVG11/feature#Image","1.1"),t.supportsType=function(a){return a?A[a]:!0};var O=/(\([^)]+\))?\s*(.+)/,P={};t.parseSize=function(a){var b;return P[a]||(b=(a||"").match(O),P[a]={media:b&&b[1],length:b&&b[2]}),P[a]},t.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 Q,R={},S=/^([\+eE\d\.]+)(w|x)$/,T="font-size:100% !important;";t.getEmValue=function(){var a;if(!Q&&(a=b.body)){var c=b.createElement("div"),d=z.style.cssText,e=a.style.cssText;c.style.cssText=N,z.style.cssText=T,a.style.cssText=T,a.appendChild(c),Q=c.offsetWidth,a.removeChild(c),Q=parseFloat(Q,10),z.style.cssText=d,a.style.cssText=e}return Q||16};var U={};t.calcListLength=function(a){if(!(a in U)||B.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=t.parseSize(b),e=c.length,f=c.media,!e||!t.matchesMedia(f)||(j=t.calcLength(e))===!1);g++);U[a]=j?j:t.vW}return U[a]},t.setRes=function(a){var b,c;if(a){b=t.parseSet(a);for(var d=0,e=b.length;e>d;d++)c=b[d],c.descriptor||o(c,a.sizes)}return b};var V,W,X,Y,Z,$;t.applySetCandidate=function(a,b){if(a.length){var c,d,e,f,i,l,m,n,o,p,q=b[t.ns],u=t.DPR*B.xQuant,v=!0;if(m=q.curSrc||b[s],n=q.curCan||k(b,m,a[0].set),m&&(n&&(n.res+=Y),b.complete||q.src!=w.call(b,"src")||(o=!q.pic||n&&n.set==a[0].set,(o||!$&&!h(b))&&(l=n,p=m,v="lazy",$&&bb(b)))),!l)for(a.sort(j),i=a.length,l=a[i-1],d=0;i>d;d++)if(c=a[d],c.res>=u){e=d-1,l=a[e]&&(f=c.res-u)&&m!=t.makeUrl(c.url)&&g(a[e].res,f,u)?a[e]:c;break}return l&&(p=t.makeUrl(l.url),r||(b.currentSrc=p),q.curSrc=p,q.curCan=l,p!=m?t.setSrc(b,l):t.setSize(b)),v}},t.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 _=function(){G(this,"load",_),t.setSize(this)};t.setSize=function(a){var b,c=a[t.ns].curCan;B.addSize&&c&&!a[t.ns].dims&&(a.complete||(G(a,"load",_),F(a,"load",_)),b=a.naturalWidth,b&&("x"==c.desc.type?x.call(a,"width",parseInt(b/c.res/B.xQuant,10)):"w"==c.desc.type&&x.call(a,"width",parseInt(c.cWidth*(b/c.desc.val),10))))},b.addEventListener&&"naturalWidth"in v&&"complete"in v||(t.setSize=u),t.getSet=function(a){var b,c,d,e=!1,f=a[t.ns].sets;for(b=0;bd;d++)t.fillImg(c[d],f);t.teardownRun(f)}};t.fillImgs=eb,a.HTMLPictureElement?(eb=u,t.fillImg=u):!function(){var c=/^loade|^c/,d=function(){clearTimeout(g),g=setTimeout(d,3e3),b.body&&(c.test(b.readyState||"")&&($=!0,clearTimeout(g),G(b,"readystatechange",d)),t.fillImgs())},e=function(){t.fillImgs({reevaluate:!0})},f=function(){clearTimeout(cb),I=!0,cb=setTimeout(e,99)},g=setTimeout(d,b.body?9:99);F(a,"resize",f),F(b,"readystatechange",d)}(),eb._=t,eb.config=function(a,b,c){if("addType"==a){if(A[b]=c,"pending"==c)return}else B[a]=b;db&&t.fillImgs({reevaluate:!0})},a.respimage=eb,"object"==typeof module&&"object"==typeof module.exports?module.exports=eb:"function"==typeof define&&define.amd&&define(function(){return eb})}(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(){I=!1,t.vW=a.innerWidth||Math.max(z.offsetWidth||0,z.clientWidth||0),H=a.innerHeight||Math.max(z.offsetHeight||0,z.clientHeight||0)}function f(a){if(!(a in R)){var b={val:1,type:"x"},c=d(a||"");c&&(c.match(S)?(b.val=1*RegExp.$1,b.type=RegExp.$2):b=!1),R[a]=b}return R[a]}function g(a,b,c){return a/c>.2&&(a+=b*X,b>Z&&(a+=W)),a>c}function h(a){if(!a.getBoundingClientRect)return!0;var b,c,d=a.getBoundingClientRect();return d.top>=0&&(b=d.bottom)<=H&&d.left>=0&&(c=d.right)<=t.vW&&(b||c)}function i(a){var b,c=t.getSet(a),d=!1;"pending"!=c&&(d=!0,c&&(b=t.setRes(c),d=t.applySetCandidate(b,a))),a[t.ns].evaled=d}function j(a,b){return a.res-b.res}function k(a,b,c){var d;return!c&&b&&(c=a[t.ns].sets,c=c&&c[c.length-1]),d=l(b,c),d&&(b=t.makeUrl(b),a[t.ns].curSrc=b,a[t.ns].curCan=d,r||(a.currentSrc=b),d.res||o(d,d.set.sizes)),d}function l(a,b){var c,d,e;if(a&&b)for(e=t.parseSet(b),a=t.makeUrl(a),c=0;cc;c++)e=g[c],e[t.ns]=!0,f=e.getAttribute("srcset"),f&&b.push({srcset:f,media:e.getAttribute("media"),type:e.getAttribute("type"),sizes:e.getAttribute("sizes")})}function o(a,b){var c=a.desc;return"w"==c.type?(a.cWidth=t.calcListLength(b||"100vw"),a.res=c.val/a.cWidth):a.res=c.val,a}b.createElement("picture");var p,q,r,s,t={},u=function(){},v=b.createElement("img"),w=v.getAttribute,x=v.setAttribute,y=v.removeAttribute,z=b.documentElement,A={},B={addSize:!1,xQuant:1,tLow:.1,tHigh:.5,tLazy:.1,greed:.3},C="data-risrc",D=C+"set";t.ns=("ri"+(new Date).getTime()).substr(0,9),r="currentSrc"in v,s=r?"currentSrc":"src",t.supSrcset="srcset"in v,t.supSizes="sizes"in v,t.selShort="picture > img, img[srcset]",t.sel=t.selShort,t.cfg=B,t.supSrcset&&(t.sel+=", img["+D+"]");var E=b.createElement("a");t.makeUrl=function(a){return E.href=a,E.href},t.qsa=function(a,b){return a.querySelectorAll(b)};var F=(a.console&&"function"==typeof console.warn?function(a){console.warn(a)}:u,function(a,b,c,d){a.addEventListener?a.addEventListener(b,c,d||!1):a.attachEvent&&a.attachEvent("on"+b,c)}),G=function(a,b,c,d){a.removeEventListener?a.removeEventListener(b,c,d||!1):a.detachEvent&&a.detachEvent("on"+b,c)};"https:"==location.protocol,t.matchesMedia=function(){return t.matchesMedia=a.matchMedia&&(matchMedia("(min-width: 0.1em)")||{}).matches?function(a){return!a||matchMedia(a).matches}:t.mMQ,t.matchesMedia.apply(this,arguments)},t.vW=0;var H,I=!0,J={minw:/\(\s*min\-width\s*:\s*(\s*[0-9\.]+)(px|em)\s*\)/,maxw:/\(\s*max\-width\s*:\s*(\s*[0-9\.]+)(px|em)\s*\)/},K={};t.mMQ=function(a){var b,c,d=!1;return a?(K[a]||(b=a.match(J.minw)&&parseFloat(RegExp.$1)+(RegExp.$2||""),c=a.match(J.maxw)&&parseFloat(RegExp.$1)+(RegExp.$2||""),b&&(b=parseFloat(b,10)*(b.indexOf("em")>0?t.getEmValue():1)),c&&(c=parseFloat(c,10)*(c.indexOf("em")>0?t.getEmValue():1)),K[a]={min:b,max:c}),b=K[a].min,c=K[a].max,(b&&t.vW>=b||c&&t.vW<=c)&&(d=!0),d):!0},t.DPR=a.devicePixelRatio||1;var L={},M=/^([\d\.]+)(em|vw|px)$/,N="position:absolute;left:0;visibility:hidden;display:block;padding:0;border:none;font-size:1em;width:1em;";t.calcLength=function(a){var c,d,e=a,f=!1;if(!(e in L)){if(d=a.match(M))d[1]=parseFloat(d[1],10),f=d[1]?"vw"==d[2]?t.vW*d[1]/100:"em"==d[2]?t.getEmValue()*d[1]:d[1]:!1;else if(a.indexOf("calc")>-1||parseInt(a,10)){a=a.replace("vw","%"),q||(q=b.createElement("div"),q.style.cssText=N),p||(p=!0,z.insertBefore(q,z.firstChild)),q.style.width="0px";try{q.style.width=a}catch(g){c=!0}f=q.offsetWidth,c&&(f=!1)}0>=f&&(f=!1),L[e]=f}return L[e]},t.types=A,A["image/jpeg"]=!0,A["image/gif"]=!0,A["image/png"]=!0,A["image/svg+xml"]=b.implementation.hasFeature("http://wwwindow.w3.org/TR/SVG11/feature#Image","1.1"),t.supportsType=function(a){return a?A[a]:!0};var O=/(\([^)]+\))?\s*(.+)/,P={};t.parseSize=function(a){var b;return P[a]||(b=(a||"").match(O),P[a]={media:b&&b[1],length:b&&b[2]}),P[a]},t.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 Q,R={},S=/^([\+eE\d\.]+)(w|x)$/,T="font-size:100% !important;";t.getEmValue=function(){var a;if(!Q&&(a=b.body)){var c=b.createElement("div"),d=z.style.cssText,e=a.style.cssText;c.style.cssText=N,z.style.cssText=T,a.style.cssText=T,a.appendChild(c),Q=c.offsetWidth,a.removeChild(c),Q=parseFloat(Q,10),z.style.cssText=d,a.style.cssText=e}return Q||16};var U={};t.calcListLength=function(a){if(!(a in U)||B.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=t.parseSize(b),e=c.length,f=c.media,!e||!t.matchesMedia(f)||(j=t.calcLength(e))===!1);g++);U[a]=j?j:t.vW}return U[a]},t.setRes=function(a){var b,c;if(a){b=t.parseSet(a);for(var d=0,e=b.length;e>d;d++)c=b[d],c.descriptor||o(c,a.sizes)}return b};var V,W,X,Y,Z,$;t.applySetCandidate=function(a,b){if(a.length){var c,d,e,f,i,l,m,n,o,p,q=b[t.ns],u=t.DPR*B.xQuant,v=!0;if(m=q.curSrc||b[s],n=q.curCan||k(b,m,a[0].set),m&&(n&&(n.res+=Y),o=!q.pic||n&&n.set==a[0].set,n&&o&&n.res>=u?l=n:b.complete||q.src!=w.call(b,"src")||(o||!$&&!h(b))&&(l=n,p=m,v="lazy",$&&bb(b))),!l)for(a.sort(j),i=a.length,l=a[i-1],d=0;i>d;d++)if(c=a[d],c.res>=u){e=d-1,l=a[e]&&(f=c.res-u)&&m!=t.makeUrl(c.url)&&g(a[e].res,f,u)?a[e]:c;break}return l&&(p=t.makeUrl(l.url),r||(b.currentSrc=p),q.curSrc=p,q.curCan=l,p!=m?t.setSrc(b,l):t.setSize(b)),v}},t.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 _=function(){G(this,"load",_),t.setSize(this)};t.setSize=function(a){var b,c=a[t.ns].curCan;B.addSize&&c&&!a[t.ns].dims&&(a.complete||(G(a,"load",_),F(a,"load",_)),b=a.naturalWidth,b&&("x"==c.desc.type?x.call(a,"width",parseInt(b/c.res/B.xQuant,10)):"w"==c.desc.type&&x.call(a,"width",parseInt(c.cWidth*(b/c.desc.val),10))))},b.addEventListener&&"naturalWidth"in v&&"complete"in v||(t.setSize=u),t.getSet=function(a){var b,c,d,e=!1,f=a[t.ns].sets;for(b=0;bd;d++)t.fillImg(c[d],f);t.teardownRun(f)}};t.fillImgs=eb,a.HTMLPictureElement?(eb=u,t.fillImg=u):!function(){var c=/^loade|^c/,d=function(){clearTimeout(g),g=setTimeout(d,3e3),b.body&&(c.test(b.readyState||"")&&($=!0,clearTimeout(g),G(b,"readystatechange",d)),t.fillImgs())},e=function(){t.fillImgs({reevaluate:!0})},f=function(){clearTimeout(cb),I=!0,cb=setTimeout(e,99)},g=setTimeout(d,b.body?9:99);F(a,"resize",f),F(b,"readystatechange",d)}(),eb._=t,eb.config=function(a,b,c){if("addType"==a){if(A[b]=c,"pending"==c)return}else B[a]=b;db&&t.fillImgs({reevaluate:!0})},a.respimage=eb,"object"==typeof module&&"object"==typeof module.exports?module.exports=eb:"function"==typeof define&&define.amd&&define(function(){return eb})}(window,document); \ No newline at end of file