Asynchronous image loading in a uitableview

Question

I'm currently integrating Facebook in my application and I'm currently at the point where I'm loading the profile pictures of the friends of the loggedin user. I'm presenting these users in a UITableView, in each cell the picture and the name of the friend. I've subclassed UIImageView and when the corresponding cell is handled in the cellForView method, the image is loaded asynchronously.

However, when I scroll up and down several times, the image is flickering, first some wrong pictures are loaded, displayed for a very short time and then the right image is loaded. So I think that i have to look for a way to stop the loading of the image when the cell is outside the view.

Is there anyone who can help me with this problem and give me a solution?

Thanks in advance!

Answer 1

You can dismiss any loaded image (as well as an ongoing loading operation, if there is one) in
- (void)prepareForReuse method of UITableViewCell .

I would strongly recommend to reuse cells, there is no chance you'll get nice smooth scrolling without it.

Answer 2

You could consider not reusing cells. This could, however, impair performance if you have a lot of table cells that need to be loaded (eg, lot of friends). Since every cell has its own image, flickering won't occur because of cell reusing.

Another thing to look at is the file size of the images. Chances are they're bigger than the size you're actually showing them at. If there's a way to get a smaller version, that would definitely help, too.

Third, you can set the image view to a default image in tableView:willDisplayCell:forRowAtIndexPath . The flickering will probably still occur, but with a default image, that looks better than if it's someone else's picture. In fact, I think this is what the Facebook app does.

Answer 3

When cell becomes hidden it is removed from the tableView . So you can override in your UITableViewCell derived class method willMoveToSuperview:

- (void)willMoveToSuperview:(UIView *)newSuperview
{
    [super willMoveToSuperview:newSuperview];
    if(newSuperview == nil) {
        // Stop image downloading
    }
}