111 |
71 | ```
72 | [load example](http://codepen.io/aFarkas/pen/qEBOEq)
73 |
74 |
75 | ###``srcset`` with the width ``w`` descriptor and the ``sizes`` attribute
76 | The ``w`` descriptor is in [Firefox 38 and Chrome 38+](http://caniuse.com/#feat=srcset). All other browsers will be polyfilled.
87 | ```
88 | [load example](http://codepen.io/aFarkas/pen/KwKdpY)
89 |
90 | ###The ``picture`` element
91 | The ``picture`` element is currently only supported in [Firefox 38 and Chrome 38+](http://caniuse.com/#search=picture). All other browsers will be polyfilled. To support IE9 all source elements have to be wrapped inside of an ``audio`` or hidden ``video`` element:
92 |
93 | ```html
94 |
111 |
135 | 
248 | ```
249 |
250 | ###Simply live with it and use either the most often used or the smallest source candidate as the fallback ``src``
251 |
252 | ```html
253 | Your browser does supports respimg natively. Please use a browser without picture/srcset support.
77 |The number on the top are the calculated resolutions for the image:
80 |number in green is the image selected by respimg. While number in gray is the next lower and number in red is the next higher candidate.
81 |You might see depending on the viewport size, that respimage will sometimes take a lower resolution candidate, if the next higher candidate means to much to download.
82 |Due to the fact that the resource algorithm takes quality vs. performance into account. Most savings occur on higher devicePixelRatio's (i.e.: retina, 1.5+x).
83 |You have either a devicePixelRatio below 1.5 or do simulate such a devicePixelRatio. The smart selection algorithm has it's strength on higher density's (i.e.: 1.5x, 2x or 3x). You can simulate a different pixelRatio by using the xQuant option.
86 |by William Warby
104 |by William Warby
125 |by Micah Sheldon
142 |by
162 |by Ton Haex
177 |by Scott Anderson
192 |by Sergio
210 |by robin robokow
227 |by
246 |by Jaume Meneses
262 |by Erinc Salor
279 |by Mario Antonio Pena Zapatería
297 |by Angela Marie
318 |by Angela Marie
339 |by Swaminathan
356 |by Danny Chapman
374 |
30 |
31 | ```
32 |
33 | The calculation is pretty simple. First the browser calculates the sizes attribute in CSS pixels, in our case it's simple (500px are 500px ;-)) and then divides the width descriptor by the calculated current size:
34 |
35 | ```
36 | small.jpg: 500w / 500px = 1x
37 | medium.jpg: 1000w / 500px = 2x
38 | ```
39 |
40 | Then the browser simply takes the source candidate, which can satisfy the pixel density of the user's device (devicePixelRatio).
41 |
42 | The specification gives the implementers (mainly browser vendors, but also polyfills) room for improvements based on bandwidth, battery status, CPU/GPU performance, user preferences and so worth.
43 |
44 | And this is where ``respimage``'s not so stupid resource selection comes into play. Because there are possible improvements to the resource selection, that should be always optimized, especially if exact bandwidth, user preferences etc. are unknown.
45 |
46 | While there are some "main breakpoints" you can never account for all breakpoints especially not, if you do multiply each of them, with the diversity of each devicePixelRatio's (1x, 1.5x, 2x and 2.25x).
47 |
48 | Here is a simple example of a calculation, where the image sizes doesn't fit:
49 |
50 | ```html
51 |
56 | ```
57 |
58 | The calculated pixel density are as follows:
59 |
60 | ```
61 | small.jpg: 500w / 505px = 0.99x
62 | medium.jpg: 1000w / 505px = 1.98x
63 | big.jpg: 2000w / 505px = 3.96x
64 | ```
65 |
66 | What ``respimage``'s resource selection is doing is quite simple. It searches for the best quality candidate. In case of a 2x device, the example above returns the big.jpg, then it compares the useless extra pixels (i.e.: 3.96x - 2x : 1.96x) with the missing density of the next lower candidate "medium.jpg" (i.e.: only 0.02) and balances the quality loss vs. the performance decrease. This means the more useless data has to be downloaded, the greedier the algorithm trys to fetch the next lower candidate.
67 |
68 | Here is a simple [demo](http://codepen.io/aFarkas/full/tplJE/).
69 |
70 | The algorithm used for this is based on the following math.
71 |
72 | Let's start to include a simple "get the nearest candidate algorithm" and then refine it. We assume a 2x device and two candidates one with a resolution of 1.8x and one with a resolution with 2.6x.
73 |
74 | ```js
75 | // constants
76 | var devicePixel = 2;
77 | var lowRes = 1.8;
78 | var highRes = 2.6;
79 |
80 |
81 | var uselessDensity = highRes - devicePixel; // 0.6
82 | var lowBonus = uselessDensity; // 0.6
83 |
84 | var newLowRes = lowRes + lowBonus; // 2.4
85 |
86 | return (newLowRes > devicePixel); // true
87 |
88 | ```
89 |
90 | While this algorithm is good, it doesn't take into account the actual perceived quality of the lower resolution image candidate and the squared image data of higher densities. For example, if you treat a lower resolution candidate with 0.7x against a higher resolution candidate with 1.4x on a 1x device, the algorithm would choose the extreme fuzzy 0.7x image. On the other hand on a 2x device the algorithm would prefer a 2.2x image over a 1.7x image, although the 1.7x image looks almost identicall to the 2.2x on this device, but is only half the size. This considerations yields to the following simple refinement.
91 |
92 | ```js
93 | // example 1.
94 | // constants
95 | var devicePixel = 1;
96 | var lowRes = 0.7;
97 | var highRes = 1.4;
98 |
99 | var uselessDensity = highRes - devicePixel; // 0.4
100 | var lowBonus = uselessDensity * lowRes; // 0.28
101 |
102 | var newLowRes = lowRes + lowBonus; // 0.98
103 |
104 | return (newLowRes > devicePixel); // false
105 |
106 | // example 2. (same algorithm)
107 | // constants
108 | var devicePixel = 2;
109 | var lowRes = 1.7;
110 | var highRes = 2.2;
111 |
112 |
113 | var uselessDensity = highRes - devicePixel; // 0.2
114 | var lowBonus = uselessDensity * lowRes; // 0.34
115 |
116 | var newLowRes = lowRes + lowBonus; // 2.04
117 |
118 | return (newLowRes > devicePixel); // true
119 | ```
120 |
121 | Additionally to this algorithm, respimage's source selection algorithm also takes into account the device orientation (i.e. the performance algorithm runs more aggressive in landscape than in portrait mode) and also gives the current already loaded image source some additional advantage (i.e: in case of a resize/orientationchange or if there was an initial ``src`` applyed) to minimize re-downloads or double downloads.
122 |
123 | This simple and basic technique can save a lot of bandwidth with real images and realistic sizes: [smart selection demo](https://afarkas.github.io/respimage/cfg/index.html).
124 |
125 | 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.
126 |
127 | **``respimage`` is built to not only use responsive images today, but also to use it responsible without wasting any data or writing invalid markup.**
128 |
129 |
130 |
131 |
132 |
133 | [^]: The way how LIQP is implemented by ``respimage`` is not the implementation described by [Guypo](http://www.guypo.com/feo/introducing-lqip-low-quality-image-placeholders/) but variation suggested by [Steve Souders](http://www.guypo.com/feo/introducing-lqip-low-quality-image-placeholders/#post-850994943). As a result it can often decrease the duration until the ``onload`` event is triggered, but it will always improve perceived performance dramatically. In case you want to use the LQIP pattern for all browsers, not only Safari and FF35-, we suggest using [lazySizes]().
134 |
--------------------------------------------------------------------------------
/plugins/intrinsic-dimension/README.md:
--------------------------------------------------------------------------------
1 | #respimage - Intrinsic dimension / size /scaling plugin
2 |
3 | The very lightweight intrinsic dimension plugin extends ``respimage`` to add the intrinsic dimension based on the descriptor (and the sizes attribute) and the density of the source candidate to the width content attribute of the image element. This scaling can be of course simply overwritten by any CSS selector.
4 |
5 | ##Download and embed
6 | Simply download the ``ri.intrinsic.min.js`` and include it after the respimage script:
7 |
8 | ```html
9 |
10 |
11 | ```
12 |
13 | Here is a [demo of the intrinsic sizes extension](http://jsfiddle.net/trixta/gs3p14pr/embedded/result/).
14 |
15 | In case you want to include **respimage** only if the browser doesn't support responsive images you can use a script loader or write the following at the top of your head:
16 |
17 | ```html
18 |
27 | ```
28 |
29 | Of course it is recommend to combine your scripts.
30 |
31 | In case you want to use a CDN you can use the combohandler service by jsDelivr:
32 |
33 | ```html
34 |
42 | ```
43 |
44 | Note: To get this fully work in IE8 the ``img`` elements need a ``height: auto``. Simply add the following line to your CSS normalization:
45 |
46 | ```html
47 | img {
48 | height: auto;
49 | }
50 |
51 | /*
52 | or only target specific img elements:
53 | */
54 |
55 | .content img {
56 | height: auto;
57 | }
58 | ```
59 |
60 |
--------------------------------------------------------------------------------
/plugins/intrinsic-dimension/ri.intrinsic.js:
--------------------------------------------------------------------------------
1 | (function( factory ) {
2 | "use strict";
3 | var interValId;
4 | var intervalIndex = 0;
5 | var run = function(){
6 | if ( window.respimage ) {
7 | factory( window.respimage );
8 | }
9 | if(window.respimage || intervalIndex > 9999){
10 | clearInterval(interValId);
11 | }
12 | intervalIndex++;
13 | };
14 | interValId = setInterval(run, 8);
15 |
16 | run();
17 |
18 | }( function( respimage, undefined ) {
19 | "use strict";
20 |
21 | var document = window.document;
22 | var ri = respimage._;
23 | var knownWidths = {};
24 | var cfg = ri.cfg;
25 | var setSize = function(width, img, data){
26 | var curCandidate = data.curCan;
27 |
28 | if ( width ) {
29 | img.setAttribute( "width", Math.round(width / curCandidate.res) );
30 | }
31 | };
32 | var loadBg = function(url, img, data){
33 | var bgImg, curCandidate, clear;
34 |
35 |
36 | if(url in knownWidths){
37 | setSize(knownWidths[url], img, data);
38 | } else {
39 | clear = function(){
40 | data.pendingURLSize = null;
41 | bgImg.onload = null;
42 | bgImg.onerror = null;
43 | img = null;
44 | bgImg = null;
45 | };
46 |
47 | data.pendingURLSize = url;
48 | curCandidate = data.curCan;
49 |
50 | if(curCandidate.w){
51 | setSize(curCandidate.w, img, data);
52 | }
53 |
54 | bgImg = document.createElement("img");
55 |
56 | bgImg.onload = function(){
57 | knownWidths[url] = bgImg.naturalWidth || bgImg.width;
58 | if (!knownWidths[url]) {
59 | try {
60 | document.body.appendChild(bgImg);
61 | knownWidths[url] = bgImg.offsetWidth || bgImg.naturalWidth || bgImg.width;
62 | document.body.removeChild(bgImg);
63 | } catch (e) {}
64 | }
65 | if(url == img.src){
66 | setSize(knownWidths[url], img, data);
67 | }
68 | clear();
69 | };
70 | bgImg.onerror = clear;
71 |
72 | bgImg.src = url;
73 |
74 | if(bgImg && bgImg.complete){
75 | bgImg.onload();
76 | }
77 | }
78 |
79 | };
80 | var reeval = (function(){
81 | var running, timer;
82 |
83 | var run = function(){
84 | var i, len, imgData;
85 | var imgs = document.getElementsByTagName("img");
86 | var options = {elements: []};
87 |
88 | ri.setupRun(options);
89 |
90 | running = false;
91 | clearTimeout(timer);
92 |
93 | for(i = 0, len = imgs.length; i < len; i++){
94 | imgData = imgs[i][ri.ns];
95 |
96 | if(imgData && imgData.curCan){
97 | ri.setRes.res(imgData.curCan, imgData.curCan.set.sizes);
98 | ri.setSize(imgs[i]);
99 | }
100 | }
101 |
102 | ri.teardownRun( options );
103 | };
104 |
105 | return function(){
106 | if(!running && cfg.addSize){
107 | running = true;
108 | clearTimeout(timer);
109 | timer = setTimeout(run);
110 | }
111 | };
112 |
113 | })();
114 |
115 | ri.setSize = function( img ) {
116 | var url;
117 | var data = img[ ri.ns ];
118 | var curCandidate = data.curCan;
119 |
120 | if ( data.dims === undefined ) {
121 | data.dims = img.getAttribute( "height" ) && img.getAttribute( "width" );
122 | }
123 |
124 | if ( !cfg.addSize || !curCandidate || data.dims ) {return;}
125 | url = ri.makeUrl(curCandidate.url);
126 |
127 | if(url == img.src && url !== data.pendingURLSize){
128 | loadBg(url, img, data);
129 | }
130 | };
131 |
132 |
133 | if(window.addEventListener && !ri.supPicture){
134 | addEventListener("resize", reeval, false);
135 | }
136 |
137 | if(!('addSize' in cfg)){
138 | cfg.addSize = true;
139 | } else {
140 | cfg.addSize = !!cfg.addSize;
141 | }
142 |
143 | reeval();
144 | }));
145 |
--------------------------------------------------------------------------------
/plugins/intrinsic-dimension/ri.intrinsic.min.js:
--------------------------------------------------------------------------------
1 | /*! respimage - v1.4.2 - 2015-08-22
2 | Licensed MIT */
3 | !function(a){"use strict";var b,c=0,d=function(){window.respimage&&a(window.respimage),(window.respimage||c>9999)&&clearInterval(b),c++};b=setInterval(d,8),d()}(function(a,b){"use strict";var c=window.document,d=a._,e={},f=d.cfg,g=function(a,b,c){var d=c.curCan;a&&b.setAttribute("width",Math.round(a/d.res))},h=function(a,b,d){var f,h,i;a in e?g(e[a],b,d):(i=function(){d.pendingURLSize=null,f.onload=null,f.onerror=null,b=null,f=null},d.pendingURLSize=a,h=d.curCan,h.w&&g(h.w,b,d),f=c.createElement("img"),f.onload=function(){if(e[a]=f.naturalWidth||f.width,!e[a])try{c.body.appendChild(f),e[a]=f.offsetWidth||f.naturalWidth||f.width,c.body.removeChild(f)}catch(h){}a==b.src&&g(e[a],b,d),i()},f.onerror=i,f.src=a,f&&f.complete&&f.onload())},i=function(){var a,b,e=function(){var e,f,g,h=c.getElementsByTagName("img"),i={elements:[]};for(d.setupRun(i),a=!1,clearTimeout(b),e=0,f=h.length;f>e;e++)g=h[e][d.ns],g&&g.curCan&&(d.setRes.res(g.curCan,g.curCan.set.sizes),d.setSize(h[e]));d.teardownRun(i)};return function(){!a&&f.addSize&&(a=!0,clearTimeout(b),b=setTimeout(e))}}();d.setSize=function(a){var c,e=a[d.ns],g=e.curCan;e.dims===b&&(e.dims=a.getAttribute("height")&&a.getAttribute("width")),f.addSize&&g&&!e.dims&&(c=d.makeUrl(g.url),c==a.src&&c!==e.pendingURLSize&&h(c,a,e))},window.addEventListener&&!d.supPicture&&addEventListener("resize",i,!1),f.addSize="addSize"in f?!!f.addSize:!0,i()});
--------------------------------------------------------------------------------
/plugins/mutation/README.md:
--------------------------------------------------------------------------------
1 | #respimage - Mutation plugin
2 |
3 | The mutation plugin extends ``respimage`` to automatically detect new responsive images in the document and additionally detects relevant attribute changes / mutations for responsive images. It also re-normalizes the ``getAttribute`` method in conjunction with the ``src`` and the ``srcset`` attribute. And adds getter and setter support for ``sizes`` and ``srcset`` as also getter support for the ``currentSrc`` property.
4 |
5 | ##Download and embed
6 | Simply download the ``ri.mutation.min.js`` and include it after the respimage script:
7 |
8 | ```html
9 |
10 |
11 | ```
12 |
13 | In case you want to include **respimage** only if the browser doesn't support responsive images you can use a script loader or write the following at the top of your head (as inline script before any blocking resource):
14 |
15 | ```html
16 |
25 | ```
26 |
27 | Of course it is recommend to combine your scripts.
28 |
29 | In case you want to use a CDN you can use the combohandler service by jsDelivr:
30 |
31 | ```html
32 |
40 | ```
41 |
42 |
--------------------------------------------------------------------------------
/plugins/mutation/ri.mutation.js:
--------------------------------------------------------------------------------
1 | (function( factory ) {
2 | "use strict";
3 | var interValId;
4 | var intervalIndex = 0;
5 | var run = function(){
6 | if ( window.respimage ) {
7 | factory( window.respimage );
8 | }
9 | if(window.respimage || intervalIndex > 9999){
10 | clearInterval(interValId);
11 | }
12 | intervalIndex++;
13 | };
14 | interValId = setInterval(run, 8);
15 |
16 | run();
17 |
18 | }( function( respimage ) {
19 | "use strict";
20 |
21 | var document = window.document;
22 | var Element = window.Element;
23 | var MutationObserver = window.MutationObserver;
24 | var noop = function() {};
25 | var riobserver = {
26 | disconnect: noop,
27 | take: noop,
28 | observe: noop,
29 | start: noop,
30 | stop: noop,
31 | connected: false
32 | };
33 | var isReady = /^loade|^c|^i/.test(document.readyState || "");
34 | var ri = respimage._;
35 | ri.mutationSupport = false;
36 | ri.observer = riobserver;
37 | if ( !Object.keys || !window.HTMLSourceElement || !document.addEventListener) {
38 | return;
39 | }
40 | var matches, observer, allowConnect, addMutation;
41 |
42 | var observeProps = { src: 1, srcset: 1, sizes: 1, media: 1 };
43 | var attrFilter = Object.keys( observeProps );
44 | var config = { attributes: true, childList: true, subtree: true, attributeFilter: attrFilter };
45 | var elemProto = Element && Element.prototype;
46 | var sup = {};
47 | var monkeyPatch = function( name, fn ) {
48 | sup[ name ] = ri[ name ];
49 | ri[ name ] = fn;
50 | };
51 |
52 | if ( elemProto && !elemProto.matches ) {
53 | elemProto.matches = elemProto.matchesSelector || elemProto.mozMatchesSelector || elemProto.webkitMatchesSelector || elemProto.msMatchesSelector;
54 | }
55 |
56 | if ( elemProto && elemProto.matches ) {
57 | matches = function( elem, sel ) {
58 | return elem.matches( sel );
59 | };
60 | ri.mutationSupport = !!( Object.create && Object.defineProperties );
61 | }
62 |
63 | if ( !ri.mutationSupport ) {
64 | return;
65 | }
66 |
67 | riobserver.observe = function() {
68 | if ( allowConnect ) {
69 | riobserver.connected = true;
70 | if ( observer ) {
71 | observer.observe( document.documentElement, config );
72 | }
73 | }
74 | };
75 |
76 | riobserver.disconnect = function() {
77 | riobserver.connected = false;
78 | if ( observer ) {
79 | observer.disconnect();
80 | }
81 | };
82 |
83 | riobserver.take = function() {
84 | if ( observer ) {
85 | ri.onMutations( observer.takeRecords() );
86 | } else if ( addMutation ) {
87 | addMutation.take();
88 | }
89 | };
90 |
91 | riobserver.start = function() {
92 | allowConnect = true;
93 | riobserver.observe();
94 | };
95 |
96 | riobserver.stop = function() {
97 | allowConnect = false;
98 | riobserver.disconnect();
99 | };
100 |
101 | monkeyPatch( "setupRun", function() {
102 | riobserver.disconnect();
103 | return sup.setupRun.apply( this, arguments );
104 | });
105 |
106 | monkeyPatch( "teardownRun", function() {
107 | var ret = sup.setupRun.apply( this, arguments );
108 | riobserver.observe();
109 | return ret;
110 | });
111 |
112 | monkeyPatch( "setSrc", function() {
113 | var ret;
114 | var wasConnected = riobserver.connected;
115 | riobserver.disconnect();
116 | ret = sup.setSrc.apply( this, arguments );
117 | if ( wasConnected ) {
118 | riobserver.observe();
119 | }
120 | return ret;
121 | });
122 |
123 | ri.onMutations = function( mutations ) {
124 | var i, len;
125 | var modifiedImgs = [];
126 |
127 | for (i = 0, len = mutations.length; i < len; i++) {
128 | if ( isReady && mutations[i].type === "childList" ) {
129 | ri.onSubtreeChange( mutations[i], modifiedImgs );
130 | } else if ( mutations[i].type === "attributes" ) {
131 | ri.onAttrChange( mutations[i], modifiedImgs );
132 | }
133 | }
134 |
135 | if ( modifiedImgs.length ) {
136 |
137 | ri.fillImgs({
138 | elements: modifiedImgs,
139 | reevaluate: true
140 | });
141 | }
142 | };
143 |
144 | ri.onSubtreeChange = function( mutations, imgs ) {
145 | ri.findAddedMutations( mutations.addedNodes, imgs );
146 | ri.findRemovedMutations( mutations.removedNodes, mutations.target, imgs );
147 | };
148 |
149 | ri.findAddedMutations = function( nodes, imgs ) {
150 | var i, len, node, nodeName;
151 | for ( i = 0, len = nodes.length; i < len; i++ ){
152 | node = nodes[i];
153 | if ( node.nodeType !== 1 ) {continue;}
154 |
155 | nodeName = node.nodeName.toUpperCase();
156 |
157 | if ( nodeName === "PICTURE" ) {
158 | ri.addToElements( node.getElementsByTagName( "img" )[0], imgs );
159 | } else if ( nodeName === "IMG" && matches( node, ri.selShort ) ){
160 | ri.addToElements( node, imgs );
161 | } else if ( nodeName === "SOURCE" ) {
162 | ri.addImgForSource( node, node.parentNode, imgs );
163 | } else {
164 | ri.addToElements( ri.qsa( node, ri.selShort ), imgs );
165 | }
166 | }
167 | };
168 |
169 | ri.findRemovedMutations = function( nodes, target, imgs ) {
170 | var i, len, node;
171 | for ( i = 0, len = nodes.length; i < len; i++ ) {
172 | node = nodes[i];
173 | if ( node.nodeType !== 1 ) {continue;}
174 | if ( node.nodeName.toUpperCase() === "SOURCE" ) {
175 | ri.addImgForSource( node, target, imgs );
176 | }
177 | }
178 | };
179 |
180 | ri.addImgForSource = function( node, parent, imgs ) {
181 | if ( parent && ( parent.nodeName || "" ).toUpperCase() !== "PICTURE" ) {
182 | parent = parent.parentNode;
183 |
184 | if(!parent || ( parent.nodeName || "" ).toUpperCase() !== "PICTURE" ) {
185 | parent = null;
186 | }
187 | }
188 |
189 | if(parent){
190 | ri.addToElements( parent.getElementsByTagName( "img" )[0], imgs );
191 | }
192 | };
193 |
194 | ri.addToElements = function( img, imgs ) {
195 | var i, len;
196 | if ( img ) {
197 | if ( ("length" in img) && !img.nodeType ){
198 | for ( i = 0, len = img.length; i < len; i++ ) {
199 | ri.addToElements( img[i], imgs );
200 | }
201 | } else if ( img.parentNode && imgs.indexOf(img) === -1 ) {
202 | imgs.push( img );
203 | }
204 | }
205 | };
206 |
207 | ri.onAttrChange = function( mutation, modifiedImgs ) {
208 | var nodeName;
209 | var riData = mutation.target[ ri.ns ];
210 |
211 | if ( !riData &&
212 | mutation.attributeName === "srcset" &&
213 | (nodeName = mutation.target.nodeName.toUpperCase()) === "IMG" ) {
214 | ri.addToElements( mutation.target, modifiedImgs );
215 | } else if ( riData ) {
216 | if(!nodeName){
217 | nodeName = mutation.target.nodeName.toUpperCase();
218 | }
219 |
220 | if ( nodeName === "IMG" ) {
221 | if ( mutation.attributeName in riData ) {
222 | riData[ mutation.attributeName ] = undefined;
223 | }
224 | ri.addToElements( mutation.target, modifiedImgs );
225 | } else if ( nodeName === "SOURCE" ) {
226 | ri.addImgForSource( mutation.target, mutation.target.parentNode, modifiedImgs );
227 | }
228 | }
229 | };
230 |
231 | if ( !ri.supPicture ) {
232 |
233 | if ( MutationObserver && !ri.testMutationEvents ) {
234 | observer = new MutationObserver( ri.onMutations );
235 | } else {
236 |
237 | addMutation = (function() {
238 | var running = false;
239 | var mutations = [];
240 | var setImmediate = window.setImmediate || window.setTimeout;
241 | return function(mutation) {
242 | if ( !running ) {
243 | running = true;
244 | if ( !addMutation.take ) {
245 | addMutation.take = function() {
246 | if ( mutations.length ) {
247 | ri.onMutations( mutations );
248 | mutations = [];
249 | }
250 | running = false;
251 | };
252 | }
253 | setImmediate( addMutation.take );
254 | }
255 | mutations.push( mutation );
256 | };
257 | })();
258 |
259 | document.documentElement.addEventListener( "DOMNodeInserted", function( e ) {
260 | if ( riobserver.connected && isReady ) {
261 | addMutation( { type: "childList", addedNodes: [ e.target ], removedNodes: [] } );
262 | }
263 | }, true);
264 |
265 | document.documentElement.addEventListener( "DOMNodeRemoved", function( e ) {
266 |
267 | if ( riobserver.connected && isReady && (e.target || {}).nodeName == 'SOURCE') {
268 | addMutation( { type: "childList", addedNodes: [], removedNodes: [ e.target ], target: e.target.parentNode } );
269 | }
270 | }, true);
271 |
272 | document.documentElement.addEventListener( "DOMAttrModified", function( e ) {
273 | if ( riobserver.connected && observeProps[e.attrName] ) {
274 | addMutation( { type: "attributes", target: e.target, attributeName: e.attrName } );
275 | }
276 | }, true);
277 | }
278 |
279 | if ( window.HTMLImageElement && Object.defineProperties ) {
280 |
281 | (function() {
282 |
283 | var image = document.createElement( "img" );
284 | var imgIdls = [];
285 | var getImgAttr = image.getAttribute;
286 | var setImgAttr = image.setAttribute;
287 | var GETIMGATTRS = {
288 | src: 1
289 | };
290 |
291 | if ( ri.supSrcset && !ri.supSizes ) {
292 | GETIMGATTRS.srcset = 1;
293 | }
294 |
295 | Object.defineProperties(HTMLImageElement.prototype, {
296 | getAttribute: {
297 | value: function( attr ) {
298 | var internal;
299 | if ( GETIMGATTRS[ attr ] && (internal = this[ ri.ns ]) && ( internal[attr] !== undefined ) ) {
300 | return internal[ attr ];
301 | }
302 | return getImgAttr.apply( this, arguments );
303 | },
304 | writeable: true,
305 | enumerable: true,
306 | configurable: true
307 | }
308 | });
309 |
310 | if(!ri.supSrcset){
311 | imgIdls.push('srcset');
312 | }
313 |
314 | if(!ri.supSizes){
315 | imgIdls.push('sizes');
316 | }
317 |
318 | imgIdls.forEach(function(idl){
319 | Object.defineProperty(HTMLImageElement.prototype, idl, {
320 | set: function( value ) {
321 | setImgAttr.call( this, idl, value );
322 | },
323 | get: function() {
324 | return getImgAttr.call( this, idl ) || '';
325 | },
326 | enumerable: true,
327 | configurable: true
328 | });
329 | });
330 |
331 | if(!('currentSrc' in image)){
332 | (function(){
333 | var ascendingSort;
334 | var updateCurSrc = function(elem, src) {
335 | if(src == null){
336 | src = elem.src || '';
337 | }
338 |
339 | Object.defineProperty(elem, 'riCurrentSrc', {
340 | value: src,
341 | writable: true
342 | });
343 | };
344 | var baseUpdateCurSrc = updateCurSrc;
345 |
346 | if(ri.supSrcset && window.devicePixelRatio){
347 | ascendingSort = function( a, b ) {
348 | var aRes = a.res || a.d || a.x || a.w;
349 | var bRes = b.res || b.d || b.x || a.w;
350 | return aRes - bRes;
351 | };
352 |
353 | updateCurSrc = function(elem) {
354 | var i, cands, length, ret;
355 | var imageData = elem[ ri.ns ];
356 |
357 | if ( imageData && imageData.supported && imageData.srcset && imageData.sets && (cands = ri.parseSet(imageData.sets[0])) && cands.sort) {
358 |
359 | cands.sort( ascendingSort );
360 | length = cands.length;
361 | ret = cands[ length - 1 ];
362 |
363 | for(i = 0; i < length; i++){
364 | if(cands[i].x >= window.devicePixelRatio){
365 | ret = cands[i];
366 | break;
367 | }
368 | }
369 |
370 | if(ret){
371 | ret = ri.makeUrl(ret.url);
372 | }
373 | }
374 | baseUpdateCurSrc(elem, ret);
375 | };
376 | }
377 |
378 | document.addEventListener('load', function(e){
379 | if(e.target.nodeName.toUpperCase() == 'IMG'){
380 | updateCurSrc(e.target);
381 | }
382 | }, true);
383 |
384 | Object.defineProperty(HTMLImageElement.prototype, 'currentSrc', {
385 | set: function() {
386 | if(window.console && console.warn){
387 | console.warn('currentSrc can\'t be set on img element');
388 | }
389 | },
390 | get: function(){
391 | if(this.complete){
392 | updateCurSrc(this);
393 | }
394 | return (!this.src && !this.srcset) ? '' : this.riCurrentSrc || '';
395 | },
396 | enumerable: true,
397 | configurable: true
398 | });
399 | })();
400 | }
401 |
402 | if(window.HTMLSourceElement && !('srcset' in document.createElement('source'))){
403 |
404 | ['srcset', 'sizes'].forEach(function(idl){
405 | Object.defineProperty(HTMLSourceElement.prototype, idl, {
406 | set: function( value ) {
407 | this.setAttribute( idl, value );
408 | },
409 | get: function() {
410 | return this.getAttribute( idl ) || '';
411 | },
412 | enumerable: true,
413 | configurable: true
414 | });
415 | });
416 | }
417 |
418 | })();
419 | }
420 |
421 | riobserver.start();
422 | }
423 | if ( !isReady ) {
424 | document.addEventListener("DOMContentLoaded", function(event) {
425 | isReady = true;
426 | });
427 | }
428 | }));
429 |
--------------------------------------------------------------------------------
/plugins/mutation/ri.mutation.min.js:
--------------------------------------------------------------------------------
1 | /*! respimage - v1.4.2 - 2015-08-22
2 | Licensed MIT */
3 | !function(a){"use strict";var b,c=0,d=function(){window.respimage&&a(window.respimage),(window.respimage||c>9999)&&clearInterval(b),c++};b=setInterval(d,8),d()}(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){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};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.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}),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,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()||(b=null)),b&&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"!==(c=a.target.nodeName.toUpperCase())?d&&(c||(c=a.target.nodeName.toUpperCase()),"IMG"===c?(a.attributeName in d&&(d[a.attributeName]=void 0),h.addToElements(a.target,b)):"SOURCE"===c&&h.addImgForSource(a.target,a.target.parentNode,b)):h.addToElements(a.target,b)},h.supPicture||(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.documentElement.addEventListener("DOMNodeInserted",function(a){f.connected&&g&&l({type:"childList",addedNodes:[a.target],removedNodes:[]})},!0),b.documentElement.addEventListener("DOMNodeRemoved",function(a){f.connected&&g&&"SOURCE"==(a.target||{}).nodeName&&l({type:"childList",addedNodes:[],removedNodes:[a.target],target:a.target.parentNode})},!0),b.documentElement.addEventListener("DOMAttrModified",function(a){f.connected&&m[a.attrName]&&l({type:"attributes",target:a.target,attributeName:a.attrName})},!0)),window.HTMLImageElement&&Object.defineProperties&&!function(){var a=b.createElement("img"),c=[],d=a.getAttribute,e=a.setAttribute,f={src:1};h.supSrcset&&!h.supSizes&&(f.srcset=1),Object.defineProperties(HTMLImageElement.prototype,{getAttribute:{value:function(a){var b;return f[a]&&(b=this[h.ns])&&void 0!==b[a]?b[a]:d.apply(this,arguments)},writeable:!0,enumerable:!0,configurable:!0}}),h.supSrcset||c.push("srcset"),h.supSizes||c.push("sizes"),c.forEach(function(a){Object.defineProperty(HTMLImageElement.prototype,a,{set:function(b){e.call(this,a,b)},get:function(){return d.call(this,a)||""},enumerable:!0,configurable:!0})}),"currentSrc"in a||!function(){var a,c=function(a,b){null==b&&(b=a.src||""),Object.defineProperty(a,"riCurrentSrc",{value:b,writable:!0})},d=c;h.supSrcset&&window.devicePixelRatio&&(a=function(a,b){var c=a.res||a.d||a.x||a.w,d=b.res||b.d||b.x||a.w;return c-d},c=function(b){var c,e,f,g,i=b[h.ns];if(i&&i.supported&&i.srcset&&i.sets&&(e=h.parseSet(i.sets[0]))&&e.sort){for(e.sort(a),f=e.length,g=e[f-1],c=0;f>c;c++)if(e[c].x>=window.devicePixelRatio){g=e[c];break}g&&(g=h.makeUrl(g.url))}d(b,g)}),b.addEventListener("load",function(a){"IMG"==a.target.nodeName.toUpperCase()&&c(a.target)},!0),Object.defineProperty(HTMLImageElement.prototype,"currentSrc",{set:function(){window.console&&console.warn&&console.warn("currentSrc can't be set on img element")},get:function(){return this.complete&&c(this),this.src||this.srcset?this.riCurrentSrc||"":""},enumerable:!0,configurable:!0})}(),!window.HTMLSourceElement||"srcset"in b.createElement("source")||["srcset","sizes"].forEach(function(a){Object.defineProperty(HTMLSourceElement.prototype,a,{set:function(b){this.setAttribute(a,b)},get:function(){return this.getAttribute(a)||""},enumerable:!0,configurable:!0})})}(),f.start()),g||b.addEventListener("DOMContentLoaded",function(){g=!0}))}});
--------------------------------------------------------------------------------
/plugins/oldie/README.md:
--------------------------------------------------------------------------------
1 | #respimage - oldie plugin
2 |
3 | This simple plugin adds support for IE6 and IE7. While **respimage** supports IE8 in strict/normal mode. This plugin is also needed in case IE8 is rendering a page in compatibility view or quirks mode. It depends on jQuery.
4 |
5 |
6 |
7 |
--------------------------------------------------------------------------------
/plugins/oldie/ri.oldie.js:
--------------------------------------------------------------------------------
1 | (function( factory ) {
2 | "use strict";
3 | var interValId;
4 | var intervalIndex = 0;
5 | var run = function(){
6 | if ( window.respimage ) {
7 | factory( window.respimage );
8 | }
9 | if(window.respimage || intervalIndex > 9999){
10 | clearInterval(interValId);
11 | }
12 | intervalIndex++;
13 | };
14 | interValId = setInterval(run, 8);
15 |
16 | run();
17 |
18 | }( function( respimage ) {
19 | "use strict";
20 |
21 | var ri = respimage._;
22 |
23 | if(!document.querySelector){
24 | ri.qsa = function(context, sel) {
25 | return jQuery(sel, context);
26 | };
27 |
28 | var anchor = document.createElement('a');
29 |
30 | ri.makeUrl = function(src) {
31 | jQuery.attr(anchor, 'href', src+'' );
32 | return jQuery.prop(anchor, 'href');
33 | };
34 | }
35 |
36 | }));
37 |
--------------------------------------------------------------------------------
/plugins/oldie/ri.oldie.min.js:
--------------------------------------------------------------------------------
1 | /*! respimage - v1.4.2 - 2015-08-22
2 | Licensed MIT */
3 | !function(a){"use strict";var b,c=0,d=function(){window.respimage&&a(window.respimage),(window.respimage||c>9999)&&clearInterval(b),c++};b=setInterval(d,8),d()}(function(a){"use strict";var b=a._;if(!document.querySelector){b.qsa=function(a,b){return jQuery(b,a)};var c=document.createElement("a");b.makeUrl=function(a){return jQuery.attr(c,"href",a+""),jQuery.prop(c,"href")}}});
--------------------------------------------------------------------------------
/plugins/perfselection/README.md:
--------------------------------------------------------------------------------
1 | #respimage - perfselection plugin
2 |
3 | This plugin was removed.
4 |
5 | ##perceived performance vs. perceived quality on retina devices
6 |
7 | Use one or the combination of the following techniques:
8 |
9 | ###constraining markup patterns via the ``picture`` element
10 |
11 | ####Limitting high resolution candidates due to (max-width) fragmenting
12 | ```html
13 | 
62 | 
90 | 
101 | 
122 | 
139 | 
159 | 
174 | 
189 | 
207 | 
224 | 
243 | 
259 | 
276 | 
294 | 
315 | 
336 | 
353 | 
371 |