loading asynchronous images in tableview, they disappear at every scroll - iphone

Question

I'm parsing an xml file, containing urls for thumb images. I want to show those thumbs in an uitableview.
Using class AsyncImageView (found on this website), my code works.
The only problem is this: every time that the user scrolls the uitableview, the images disappear for a moment... then re-appear (i think that i'm downloading the image every time but i'm not sure)!
That's an ugly effect, i want that if the image is downloaded, it stay visible.
this is my code (NB: in array_thumb there are the urls parsed before):
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
static NSString *CellIdentifier;
static NSString *NibNamed;
UIDeviceOrientation deviceOrientation = [UIApplication sharedApplication].statusBarOrientation;
if (deviceOrientation != UIDeviceOrientationLandscapeLeft &&
deviceOrientation != UIDeviceOrientationLandscapeRight)
{
CellIdentifier= #"Cell1";
NibNamed = #"cell_gallery";
}
else
{
CellIdentifier= #"Cell2";
NibNamed = #"cell_gallery_landscape";
}
[[NSBundle mainBundle] loadNibNamed:NibNamed owner:self options:NULL];
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
if (cell == nil)
{
NSArray *nib = [[NSBundle mainBundle] loadNibNamed:NibNamed owner:self options:nil];
cell = [nib objectAtIndex:0];
}
else {
AsyncImageView* oldImage = (AsyncImageView*)[cell.contentView viewWithTag:1];
[oldImage removeFromSuperview];
}
CGRect frame;
frame.size.width=72; frame.size.height=72;
frame.origin.x=10; frame.origin.y=10;
AsyncImageView* asyncImage = [[[AsyncImageView alloc] initWithFrame:frame] autorelease];
NSString *title = [NSString stringWithFormat:#"%#", [array_title objectAtIndex:indexPath.row]];
UILabel *testoLabel = (UILabel*)[cell viewWithTag:2];
testoLabel.text = title;
asyncImage.tag = 1;
NSLog(#"%#", asyncImage);
NSURL *url = [NSURL URLWithString:[array_thumb objectAtIndex:indexPath.row]];
asyncImage.layer.cornerRadius = 10.0;
asyncImage.layer.masksToBounds = YES;
[asyncImage loadImageFromURL:url];
[cell.contentView addSubview:asyncImage];
UIColor *miocolore1 = [[UIColor alloc] initWithRed:247.0 / 255 green:247.0 / 255 blue:247.0 / 255 alpha:1.0];
UIColor *miocolore2 = [[UIColor alloc] initWithRed:233.0 / 255 green:233.0 / 255 blue:233.0 / 255 alpha:1.0];
if (indexPath.row % 2 == 0) {
cell.contentView.backgroundColor = miocolore1;
}
else {
cell.contentView.backgroundColor = miocolore2;
}
return cell;
}

Answer 1

Nothing in your code or in AsyncImageView suggest that the images are cached so it seems the same image gets downloaded repeatedly.
AsyncImageView is using the following to load the image:
[NSURLRequest requestWithURL:url cachePolicy:NSURLRequestUseProtocolCachePolicy];
You probably want to make sure that caching is actually happening here by altering the cache policy.
I'd checkout ASIHTTPRequest which has a great cache implementation.

Answer 2

As the cell are reused, you have to provide the data yourself. Either you can save the downloaded image as NSData or UIImage and provide the url to download or you can use the already downloaded data.
This way it wont download the image everytime you scroll.