iPhone: previewing photos

Question

Hi,

I am creating a photo preview application - it has some photos in it. When I had not a big amount of images, everything was fine. The app uses UIScrollView to switch between images, basing on the PageControl code example.

But now I added more pictures and I have some trouble with it - it consumes too much memory and my app starts getting app warnings and when I switch between pictures, it's working too slow.

Is there a way to optimize my viewer to support a large amount of image files? I want to achieve something similar to iPhone Photos application - first a low detailed image is being loaded, and than it switches to medium detailed and at the end to high detailed. How is this being done?

Thank you in advance.

Answer 1

One solution would probably be to make sure you only load images for the current page, the next page, and the previous page. This way if you have a large amount of images, you aren't trying to keep them all in memory at the same time.

As far as the low detail to high detail effect I'm not sure how Apple is doing it, but you could probably load the low detail and then in the scroll view delegates -scrollViewDidEndDeclerationg maybe start a short timer that loads the high resolution image if the person stays on the image long enough. It could be invalidated when the scroll view starts moving again.

Answer 2

If the memory problem has only begun recently when you've added more images to your application, then I would hazard a guess that either you are loading all of you images into the application simultaneously (which will eat up the limited memory quickly) or that your application is leaking memory.

If you're loading all the images simultaneously, a more efficient approach would be to load only the current image, and perhaps the images to be shown before and after the one shown. If this is the approach you've taken already, check for memory leaks.

With regards to the images starting low res and gradually becoming clearer as the resolution increases; I'm not aware of anything that Apple provides to do this, but it should be a fairly easy process to accomplish. Create a tile of the image and when panning/scaling, use the tile instead. When the movement stops, show the high res image again.

The reason the photo app on the iPhone takes this approach is likely two-fold: First the performance of the application will be better when panning and scaling a low resolution image; you only need to see the high resolution image when you stop moving the image around. Secondly, the battery on the device will take a smaller hit power wise when the application does less work (i.e. panning/scaling a low res image constantly, rather than a high res one).