DataURI on Dynamic Styles
Switch branches/tags
Nothing to show
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.


DataURI and Dynamic CSS

Read the related article at

How this thing works

Every page has some icons to be shown. The default placeholder icon is
inserted using a simple CSS rule and then after page load some simple
JS code gets the IDs of the actual images to be displayed (from the
special attribute `imgID`) and then constructs a link to a handler
which generates a CSS file with Data-URIs embedded in it so that we
can download all the required images with a single HTTP call and
insert them seamlessly into an HTML file.


Say the markup is like this -

    <li class="img img_500" imgID="500">Foo</li>
    <li class="img img_600" imgID="600">Bar</li>

The JS code extracts the "imgID" from the li and constructs a query
like the one below and inserts it into the DOM inside a link tag -


Then, the special handler generates a CSS file by reading the actual images and base64 encoding them.
The CSS file is loaded into the DOM and the new images show up instantly.


We are currently limited by the maximum number of characters allowed
in an URL, though some clever form of encoding the data might help.

Running the sample app

$ sudo easy_install flask
$ python
$ open


Baishampayan Ghose
Brajeshwar Oinam
Prajwalit Bhopale
Sidhant Godiwala