Lazy load images in UITableViewCell

Question

Hi

I have some 50 custom cells in my UITableView. I want to display an image and a label in the cells where I get the images from URLs.

I want to do a lazy load of images so the UI does not freeze up while the images are being loaded. I tried getting the images in separate threads but I have to load each image every time a cell becomes visible again (Otherwise reuse of cells shows old images)

Apps like Facebook load images only for cells currently visible and once the images are loaded, they are not loaded again. Can someone please tell me how to duplicate this behavior.

Thanks.

Edit
Trying to cache images in an NSMutableDictionary object creates problems when the user scrolls fast. I am getting images only when scrolling completely stops and clearing out the cache on memory warning. But the app invariably gets a memory warning (due to size of images being cached) and clears the cache before reloading. If scrolling is very fast, it crashes.

Any other suggestions are welcome

Answer 1

Loading the images on a background thread is still a good idea. If you didn't want to reload them each time, I'd suggest setting up an NSMutableDictionary and storing the images in there. You could use some unique identifier, like the row ID or even the name of the image, as the key for each image.

When loading a cell, you'd send an objectForKey: message to the NSMutableDictionary to retrieve the image for that particular cell (based on your unique key for it). If it returns nil, that means that the image is missing from the cache and you need your background image loading thread to go retrieve it. Otherwise, you will get back the appropriate image for your table cell to display. On a memory warning, you could clear out this cache of images with no adverse effects (aside from forcing them to be reloaded again on demand).

Answer 2

I have just successfully tackled the same problem by using a custom NSOperation to load the images in a queing fasion and stored them into a static NSMutableDictionary as a cache. Below is a link to the basis of the code I used to solve the problem.

Loading remote images for UITableViewCell

Best to read all the threads in the forum to help you understand what's actually going on.

Answer 3

lostInTransit,

I am having a similar problem and while exploring the many different possible solutions I found this blog post:

davidgolightly.blogspot.com/2009/02/asynchronous-image-caching-with-iphone.html

I would also suggest that you download the URLCache sample from the apple developer website:

developer.apple.com/iphone/prerelease/library/samplecode/URLCache/

And here is another post on the problem:

www.markj.net/iphone-asynchronous-table-image/

I'd love you to share your findings as well.

Answer 4

I just found this. It's the holy grail for this question:

http://developer.apple.com/iphone/library/samplecode/LazyTableImages/Introduction/Intro.html#//apple_ref/doc/uid/DTS40009394