Join GitHub today
GitHub is home to over 20 million developers working together to host and review code, manage projects, and build software together.
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