Stop asynchronous UITableViewCell image loading when cell is not visible? - ios

Question

I'm developing an iOS 5.0+ application with latest SDK.
This is the code I use to load images asynchronously for UITableViewCell.
- (UITableViewCell*)tableView:(UITableView *)tableView
cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
if ((groups != nil) && (groups.count > 0))
{
GroupCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
if (cell == nil)
{
cell = [[GroupCell alloc] initWithStyle:UITableViewCellStyleDefault
reuseIdentifier:CellIdentifier];
}
// Configure the cell...
Group* group = [groups objectAtIndex:indexPath.row];
cell.GroupNameLabel.text = group.Name;
// TODO: Poner el estado.
if (group.Photo)
cell.GroupImageView.image = group.Photo;
else
{
// download the photo asynchronously
NSString *urlString =
[NSString stringWithFormat:kGetGroupImageURL, [group.GroupId intValue]];
NSURL *url = [NSURL URLWithString:urlString];
[ImageTool downloadImageWithURL:url completionBlock:^(BOOL succeeded, UIImage *image) {
if (succeeded)
{
// change the image in the cell
cell.GroupImageView.image = image;
// cache the image for use later (when scrolling up)
group.Photo = image;
}
}];
}
return cell;
}
else
return nil;
}
And the loader:
#import "ImageTool.h"
#implementation ImageTool
+ (void)downloadImageWithURL:(NSURL *)url
completionBlock:(void (^)(BOOL succeeded, UIImage *image))completionBlock
{
NSMutableURLRequest *request = [NSMutableURLRequest requestWithURL:url];
[NSURLConnection sendAsynchronousRequest:request
queue:[NSOperationQueue mainQueue]
completionHandler:^(NSURLResponse *response, NSData *data, NSError *error) {
if ( !error )
{
UIImage *image = [[UIImage alloc] initWithData:data];
completionBlock(YES,image);
} else{
completionBlock(NO,nil);
}
}];
}
But it seems it's not going to work because I don't handle if the cell for which I'm loading the image it is still visible.
How can I handle if the cell is still visible?
I have found this article, but I don't know how to implement it.

Answer 1

You generally handle this by checking to see if the cell is still visible using the UITableView method cellForRowAtIndexPath:, which returns nil if the cell for that index path is no longer visible. Note, this method is not to be confused with the similarly named UITableViewDataSource method tableView:cellForRowAtIndexPath:.
if (group.Photo)
cell.GroupImageView.image = group.Photo;
else
{
// don't forget to `nil` or use placeholder for `GroupImageView` because if
// the cell is reused, you might see the old image for the other row momentarily
// while the new image is being retrieved
cell.GroupImageView.image = [UIImage imageNamed:#"placeholder.png"];
// download the photo asynchronously
NSString *urlString =
[NSString stringWithFormat:kGetGroupImageURL, [group.GroupId intValue]];
NSURL *url = [NSURL URLWithString:urlString];
[ImageTool downloadImageWithURL:url completionBlock:^(BOOL succeeded, UIImage *image) {
if (succeeded)
{
dispatch_async(dispatch_get_main_queue(), ^ {
GroupCell *updateCell = [tableView cellForRowAtIndexPath:indexPath];
if (updateCell)
{
// change the image in the cell
updateCell.GroupImageView.image = image;
}
// cache the image for use later (when scrolling up)
group.Photo = image;
});
}
}];
}
Note, if the completion block of sendAsynchronousRequest is not submitted to the main queue (e.g. you may do something computationally expensive that you don't want to tie up the main queue with), you might further dispatch the UI update to the main queue as shown above. You can do it either here, like shown above, or in the downloadImageWithURL. But make sure to update the UI on the main queue (and to avoid synchronization issues, update group, there, too). Since you've specified the main queue for your operation queue, though, this is not a critical issue.
And as I point out in my code comments, if you're retrieving an image for a cell that has been reused, don't forget to reset the GroupImageView.image property to nil, too. If you don't, you may see the previous image for the reused cell show up momentarily while the request for the new row is in progress.
Alternatively, you should use a UIImageView category, such as provided by SDWebImage which takes care of all of this for you (including cache management).
As an aside, it also handles a subtle issue, which your code doesn't, namely where you scroll really quickly through a long tableview on a slow internet connection. You implementation wouldn't load the images for the currently visible cells until all of the other cells' images have loaded (since there can be only five concurrent NSURLConnection objects at a time). These UIImageView categories generally cancel the old requests for cells that have been reused, which ensures that the UI is presenting the images that the user is actually looking at more quickly.