Skip to content
This repository has been archived by the owner on Jan 21, 2021. It is now read-only.

Commit

Permalink
0.9.1
Browse files Browse the repository at this point in the history
  • Loading branch information
aFarkas committed Oct 8, 2014
1 parent ed9016c commit 5f0b886
Show file tree
Hide file tree
Showing 13 changed files with 91 additions and 80 deletions.
3 changes: 0 additions & 3 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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.

Expand Down
2 changes: 1 addition & 1 deletion bower.json
View file
Original file line number Diff line number Diff line change
@@ -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"
Expand Down
3 changes: 0 additions & 3 deletions cfg/child.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,6 @@
</head>
<body>
<script src="http://code.jquery.com/jquery-1.11.0.js"></script>
<script src="js/child.js"></script>
<script src="../respimage.dev.js"></script>
<script>
var params = {};
Expand Down Expand Up @@ -111,7 +110,6 @@ <h3></h3>
srcset="https://farm9.staticflickr.com/8200/8248153196_7a7664e147_m.jpg?busterrilow 240w,
https://farm9.staticflickr.com/8200/8248153196_7a7664e147_n.jpg?busterrilow 320w,
https://farm9.staticflickr.com/8200/8248153196_7a7664e147.jpg?busterrilow 500w,
https://farm9.staticflickr.com/8200/8248153196_7a7664e147_z.jpg?busterrilow 640w,
https://farm9.staticflickr.com/8200/8248153196_7a7664e147_c.jpg?busterrilow 800w,
https://farm9.staticflickr.com/8200/8248153196_7a7664e147_b.jpg?busterrilow 1024w,
https://farm9.staticflickr.com/8200/8248153196_439515a267_h.jpg?busterrilow 1600w,
Expand Down Expand Up @@ -224,7 +222,6 @@ <h3>Sant Miquel del Fai</h3>
src="https://farm3.staticflickr.com/2727/4393975099_c212622aa0_m.jpg?busterrilow"
srcset="https://farm3.staticflickr.com/2727/4393975099_c212622aa0_m.jpg?busterrilow 240w,
https://farm3.staticflickr.com/2727/4393975099_c212622aa0_n.jpg?busterrilow 320w,
https://farm3.staticflickr.com/2727/4393975099_c212622aa0.jpg?busterrilow 500w,
https://farm3.staticflickr.com/2727/4393975099_c212622aa0_z.jpg?busterrilow 640w,
https://farm3.staticflickr.com/2727/4393975099_c212622aa0_b.jpg?busterrilow 1024w,
https://farm3.staticflickr.com/2727/4393975099_4413ef4037_o.jpg?busterrilow 1600w"
Expand Down
103 changes: 56 additions & 47 deletions cfg/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,39 +26,46 @@
form .row {
margin-bottom: 15px;
}

summary {
margin-bottom: 10px;
}
</style>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="//afarkas.github.io/webshim/js-webshim/minified/polyfiller.js"></script>
<script src="../respimage.dev.js"></script>
<script src="js/parent.js"></script>
</head>
<body>

<div class="container">
<div class="panel panel-default">
<div class="panel-heading">smart candidate selection for responsive images</div>
<div class="panel-body">
<form role="form" class="arena-config show-activelabeltooltip">
<fieldset>
<legend>config candidate selection</legend>
<div class="row">
<div class="form-group">
<div class="col-sm-6">
<label for="xQuant">xQuant</label>
<input id="xQuant" name="xQuant" value="1" min="0.5" max="2" step="0.1" type="range" />
<p class="help-block">xQuant will be multiplied with your devicePixelRatio. Hint: If you are using a 2dpr device you can set 0.5 to simulate 1dpr device.</p>
</div>
<div class="container">
<div class="panel panel-default">
<div class="panel-heading">smart candidate selection for responsive images</div>
<div class="panel-body">
<form role="form" class="arena-config show-activelabeltooltip">
<fieldset>
<legend>config candidate selection</legend>
<div class="row">
<div class="form-group">
<div class="col-sm-6">
<label for="xQuant">xQuant</label>
<input id="xQuant" name="xQuant" value="1" min="0.5" max="2" step="0.1" type="range" />
<p class="help-block">xQuant will be multiplied with your devicePixelRatio. Hint: If you are using a 2dpr device you can set 0.5 to simulate 1dpr device.</p>
</div>
</div>
<div class="row">
<div class="form-group">
<div class="col-sm-6">
<label for="greed">greed</label>
<input id="greed" name="greed" value="0.3" min="0.05" max="1" step="0.01" type="range" />
<p class="help-block">greed is multiplied with the useless extra pixels of a source candidate and "added" to the next lowres candidate.</p>
</div>
</div>
<div class="row">
<div class="form-group">
<div class="col-sm-6">
<label for="greed">greed</label>
<input id="greed" name="greed" value="0.3" min="0.05" max="1" step="0.01" type="range" />
<p class="help-block">greed is multiplied with the useless extra pixels of a source candidate and "added" to the next lowres candidate.</p>
</div>
</div>
<div class="row" style="display: none;">
</div>
<details>
<summary>other configs</summary>
<div class="row">
<div class="form-group">
<div class="col-sm-6">
<label for="tHigh">tHigh</label>
Expand All @@ -74,44 +81,46 @@
</div>
</div>
</div>
<div class="row" style="display: none;">
<div class="row">
<div class="form-group">
<div class="col-sm-6">
<label for="tLazy">tLazy</label>
<input id="tLazy" name="tLazy" value="0.05" min="0.01" max="0.5" step="0.01" type="range" />
<p class="help-block">tLazy is a resolution booster. If an image already has a source. On resize it will be checked wether the current src + the lazy booster does satisfy the needed resolution. (In polyfill this is also used to save am initial fallback <code>src</code>.)</p>
<input id="tLazy" name="tLazy" value="0.01" min="0.01" max="0.5" step="0.01" type="range" />
<p class="help-block">tLazy is a resolution booster. If an image already has a source. On resize it will be checked wether the current src + the lazy booster does satisfy the needed resolution. (In polyfill this is also used to save an initial fallback <code>src</code>.)</p>
</div>
</div>
</div>
</fieldset>
<div class="row">
<div class="form-group start-buttons">
<div class="col-sm-6">
<button type="submit" class="btn btn-primary" name="pf">load config</button>
</div>
</details>
</fieldset>
<div class="row">
<div class="form-group start-buttons">
<div class="col-sm-6">
<button type="submit" class="btn btn-primary" name="pf">load config</button>
</div>
</div>
<div class="row">
<div class="form-group">
<div class="col-sm-6">
<label for="viewport">viewport width</label>
<input id="viewport" value="720" min="320" max="1180" step="1" type="range" />
</div>
<div class="col-sm-6">
<div class="checkbox">
<label>
<input id="vw-input" type="checkbox" checked=""> oninput / onchange
</label>
</div>
<p class="help-block">Wether viewport should be changed while dragging (input/checked) or on drag release (change/unchecked).</p>
</div>
<div class="row">
<div class="form-group">
<div class="col-sm-6">
<label for="viewport">viewport width</label>
<input id="viewport" value="720" min="320" max="1180" step="1" type="range" />
</div>
<div class="col-sm-6">
<div class="checkbox">
<label>
<input id="vw-input" type="checkbox" checked=""> oninput / onchange
</label>
</div>
<p class="help-block">Wether viewport should be changed while dragging (input/checked) or on drag release (change/unchecked).</p>
</div>
</div>
</form>
</div>
</div>
</form>
</div>
</div>

<iframe id="arena"></iframe>
<iframe id="arena"></iframe>
</div>

</body>
</html>
4 changes: 0 additions & 4 deletions cfg/js/child.js
View file

This file was deleted.

8 changes: 7 additions & 1 deletion cfg/js/parent.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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(){
Expand All @@ -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);
Expand Down
2 changes: 1 addition & 1 deletion component.json
View file
Original file line number Diff line number Diff line change
@@ -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"],
Expand Down
2 changes: 1 addition & 1 deletion how-respimg-works.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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.

Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "respimage",
"version": "0.9.1-pre",
"version": "0.9.1",
"engines": {
"node": ">= 0.8.0"
},
Expand Down
2 changes: 1 addition & 1 deletion plugins/mutation/ri.mutation.min.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

21 changes: 13 additions & 8 deletions respimage.dev.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@
tLow: 0.1,
tHigh: 0.5,
tLazy: 0.25,
greed: 0.2
greed: 0.3
};
var highBandwidth = {
xQuant: 1,
Expand All @@ -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
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down
15 changes: 8 additions & 7 deletions respimage.js
View file
Original file line number Diff line number Diff line change
@@ -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";
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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() {
Expand Down
Loading

0 comments on commit 5f0b886

Please sign in to comment.