Asynchronous image load into TableView cell

Question

Im trying to load a single image into the grouped table cell. I found a piece of code on the internet and modified it. Original code is using UIViews to display image, which is not what I need, however original code works of course. PLease help me to make this code work to display an image in a sigle cell for grouped tableview. My TableView has only one row and it has UITableViewCellStyleDefault style.

Original Code

Here is my modified method, this is the core method.

- (void)connectionDidFinishLoading:(NSURLConnection*)theConnection 
{
 [connection release];
 connection=nil;

 UIImage *img = [UIImage imageWithData:data];
 self.image = img;

 self.frame = self.bounds;
 [self setNeedsLayout];

 [data release]; 
 data=nil;
}

This is how I use it to display image in my TableView Cell cellForRowAtIndexPath method.

CGRect frame;
frame.size.width=75; frame.size.height=75;
frame.origin.x=0; frame.origin.y=0;
AsyncImageView* asyncImage = [[[AsyncImageView alloc] initWithFrame:frame] autorelease];
[asyncImage loadImageFromURL:imageURL];
cell.imageView.image = asyncImage.image;

Answer 1

In that code you posted, the image of the AsyncImageView doesn't get set until after the connection finishes loading and it actually creates the image. Problem is, you're setting it's image into the cell immediately. That's not going to work!

You're going to want to make a custom cell class (subclass UITableViewCell) and use that cell in your table. There's lots of sample code showing how to use custom cells and lay them out with views. Instead of using UITableViewCell's standard imageView, create your own layout and use an AsyncImageView to show your image. Then it should work.