I am building a web application in jQuery/HTML5 which will run in Webkit-based browsers on touchscreen kiosks.
There are a large (thousands) number of images which the application uses, which I need cached to each browser.
At first I thought a HTML5 cache manifest would be the best option (with the thousands of image URLs listed), but now I wonder if there is a better way? I would consider extensions/plugins too...
Thanks in advance!
I like this plugin: http://alexrabarts.github.com/jquery-cacheimage/
Here's another alternative: http://technosophos.com/content/precaching-images-jquery-slightly-better-way
And if you wanted to do preloading: http://engineeredweb.com/blog/09/12/preloading-images-jquery-and-javascript
EDIT: If offline browsing is needed, application cache is the way to go with HTML cache manifest. Here are some resources:
http://softwareas.com/offline-apps-with-application-cache-quickstart-tips-and-deep-dive
http://www.bennadel.com/blog/1944-Experimenting-With-HTML5-s-Cache-Manifest-For-Offline-Web-Applications.htm
Thousands of images, potentially hundreds of MB's
This would be out of localstorage's approx 5 MB Cap. You could do a ClientDatabase and request some massive amount of space.
http://dev.w3.org/html5/webdatabase/
http://webkit.org/blog/126/webkit-does-html5-client-side-database-storage/
http://creativepark.net/blog/entry/id/1191
http://ajaxian.com/archives/view-source-tutorial-sticky-notes-with-html5-and-css3
