Managing large sets of Images using Javascript on MobileSafari

Question

I'm looking at ways to manage a large set of images within Mobile Safari for iPad. In this case I have a web app that will move the images using webkit CSS3 animations (supposedly taking advantage of hardware to do so).

I've noticed that if I have more than 10 large images (200-300K each) I hit large performance issues. Animations are jumpy etc.

I've read that in some tests Safari will stop accepting images and show the "?" icon. A workaround is to draw images to a CANVAS element using drawImage().

Besides pursuing a CANVAS based work-around does anyone have strategies to load/unload images (lets say 30 to 100 images of 300K) as they need them? (I'm guessing No, but its worth asking)

Answer 1

The GPU has a limited amount of texture memory. Rendering images uses this resource. Once you run out, the OS spends a bunch of time unloading/reloading texture memory.

Best way to get better performance might be to just not display that many large images at once, especially if most of them are not on the part of the web page visible to the user. Maybe save off and replace these images with a plain colored rect (or a lowres thumbnail) on the web page until they get scrolled into view.

Answer 2

You probably want to check out this blog post: iPad + HTML5 + Javascript Memory Management.