public
Last active

Who needs srcset? Who needs <picture>? Not the AppCache people we don't!

  • Download Gist
index.html
HTML
1 2 3 4 5 6 7 8 9
<!DOCTYPE html>
<!--
- controllerpath should default to /*, it's just the typical thing
- controllersync ensures the controller is always there
-->
<html controller="respimg.js" controllerpath="/*" controllersync>
<!-- ... -->
<img src='my-shiny-donkey.png#resp-me'>
</html>
respimg.js
JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
// this all assumes no resizes
// if you need resizes, you can handle it using postMessage and a resize handler
// implementation left as an exercise to the reader
 
this.onrequest = function (e) {
if (e.request.url.match(/#resp.me/)) {
var size = doSomeMagicToPickRightSize()
, url = e.request.url.replace(/#resp.me/, "").replace(/(\.\w+)$/, size + "$1")
;
// XXX this could possibly use a better API
var xhr = new XMLHttpRequest();
xhr.open("GET", url);
e.preventDefault();
e.respondWith(xhr);
}
};

My first reaction was "WUT???".
I gave it some time to sink in and realized the underlying primitives (controller & onrequest) are a framework that will enable anybody to roll his own resource fetching polyfill.
That may mean custom responsive images solutions, custom responsive image format fetching mechanism, pipelining polyfills, custom SPDY-like protocols, etc.
Tthis can be revolutionary. Where do I sign up? :)

A few points I think needs addressing:

  • Possibility of inlined controller, to avoid SPOF, but have the controller working from the first request.
  • Possibility to add multiple controllers (for various file types or various paths)
  • When the controller is external, add some timeout beyond which simple request sending will take place

Personally, I'm not sure the above should replace a native responsive images solution. But it sure will make polyfilling the "next big thing" a whole lot easier.

nice. However, manually having to deal with resizes etc with postmessage etc will inevitably lead to libraryitis and cargo-cult code. I agree with Yoav: we still need a simple, declarative way to do this.

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.