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 http://brajeshwar.com/2010/dynamic-css-and-datauri-to-the-rescue/ 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. Example: 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 - stylesheets/logos.css?i=500|600 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. Limitations ----------- 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 app.py $ open http://127.0.0.1:5000/ Authors ------- Baishampayan Ghose http://freegeek.in Brajeshwar Oinam http://brajeshwar.com Prajwalit Bhopale http://prajwalit.com Sidhant Godiwala http://sidhantgodiwala.wordpress.com