Last active

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

  • Download Gist
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'>
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(/ {
var size = doSomeMagicToPickRightSize()
, url = e.request.url.replace(/, "").replace(/(\.\w+)$/, size + "$1")
// XXX this could possibly use a better API
var xhr = new XMLHttpRequest();"GET", url);

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.