Store images from web for UITableView - iphone

Question

I have a UITableView with custom cells showng text and an image.(image on right side).
At first, it all worked fine, but then I noticed that when scrolling, the whole tableview was lagging. This was because the app probably downloaded the cells image as the cell was entering the screen when re-using them. I added an NSCache to store the downloaded images, and told the cellForRowAtIndexPath to load the imageName if it existed, otherwise, download from the internet again. However, the cache is so short-term storage, that if I exit my app with home-button, and re-enter, then only some of the images remains, and have to download the images again.
I am trying to find out the best possible way to store images more long-term than with cache. I have read some about NSDirectory, and storing in app library, but haven't figured it out yet..
The most logic solution, I believe, would be to do something like this:
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
/*stuff*/
NSString *imageName = [dictionary objectForKey:#"Image"];
UIImage *image = [--Cache-directory-- objectForKey:imageName]; //Try to get it from cache
if(image) //If image was received from cache:
{
cell.imageView.Image = image;
}
else //If not in cache:
{
image = [--local-directory-- objectForKey:imageName]; //Check some local directory
if(image) //If image received from directory:
{
cell.imageView.Image = image;
// + Also save it to the cache?
}
else //If image was in neither cache or local directory, get it from the website with given URL
{
image = [[UIImage alloc] initWithData:[NSData dataWithContentsOfURL:imageURL]];
//Then save to cache and to file?
}
}
}
The images are rarily changed or switched out, but not so rarily that I am willing to implement them in the app beforehand so that I must release an update every time an image is added.
This is what seems logical to me. Am I on the right tracks at all? And how do I "call" the local directory? Like, if I add images to a NSDirectory-object or something, wouldn't this be reset every time? How do I access the local folder?

Answer 1

You are attacking the problem from the wrong direction...
The problem is that the tableView is lagging.
The reason is because you download your images in the main thread.
Even if you will read your images from the disc u still won't get the best scrolling performance.
So must not block your main thread. To do this u can download the picture asynchronously, or use GCD to download in another thread.
like this:
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
/*stuff*/
// this will block your main thread, bad idea..
//image = [[UIImage alloc] initWithData:[NSData dataWithContentsOfURL:imageURL]];
// instead call it in a separate thread
dispatch_queue_t imgDownloaderQueue = dispatch_queue_create("imageDownloader", NULL);
dispatch_async(imgDownloaderQueue, ^{
// download the image in separate thread
UIImage *image = [[[UIImage alloc] initWithData:[NSData dataWithContentsOfURL:imageURL]] autorelease];
dispatch_queue_t main_queue = dispatch_get_main_queue();
dispatch_sync(main_queue, ^{
// this is called in the main thread after the download has finished, here u update the cell's imageView with the new image
UITableViewCell *cell = [tableView cellForRowAtIndexPath:indexPath];
cell.imageView.image = image;
});
});
dispatch_release(imgDownloaderQueue);
}

Answer 2

Theres no need to save all those images.
If you are getting your image from a url then just use AsyncImageLoader
Use that link and get the h and m files of ASyncImageView and save them in your project.
Import the h file where ever you are doing this
#import 'AsyncImageView.h'
Then use the following code
[[AsyncImageLoader sharedLoader] cancelLoadingURL:image.imageURL];
image.imageURL=[NSURL URLWithString:#"imageURL"];

Answer 3

I was working on UITableView recently and i had a similar problem. One work around I used was since the image was small (I assume yours is as well) and had unique name, i stored them in the app's local documents folder and used core data to hold reference to the image location. I load the image from that location. Should the image change, i change those images. This may not be the most elegant method though. just a suggestion.
As for accessing the local app directory, i use this
// INSTANCE METHOD - get the path and file name for the saved plist
- (NSString *)getFileLocation:(NSString *)location {
// Get all available file system paths for the user
NSArray *paths = NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUserDomainMask, YES);
// Get the "Documents" directory path - it's the one and only on iPhone OS
NSString *documentsPath = [paths objectAtIndex:0];
// Specify the file name, appending it to documentsPath above
NSString *savedFileName = [documentsPath stringByAppendingPathComponent:location];
NSLog(#"File Location %#", location);
// We're done
return savedFileName;
}

Answer 4

Seems like the best solution might be using Core Data. But different from what #Anachid suggested you could just load them from the internet like you were doing before and put them in to the core data directory. I suggest the internet instead of putting them in your solution because you would have to update to get new pictures out. Then from there you can use them as needed.