Caching a large number of images in a jQuery/HTML5

Question

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!

Answer 1

Answer

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.

Resources I've dug up

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

Answer 2

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