Jerky scrolling with only a few images - iphone

Question

I'm using the method that Apple shows on using subviews in table (most of what is below is from their documentation). I am only pulling in via an rss feed about 12 images, but this results in slow scrolling - if I get rid of the images it moves smoothly. The images are not big, so that can't be the problem. Before looking into more involved solutions (background processing, etc.), is there anything I can do to make this work better?
Thanks for any help you can give on this.
#define MAINLABEL_TAG 1
#define SECONDLABEL_TAG 2
#define PHOTO_TAG 3
-(UITableViewCell *)tableView : (UITableView *)tableView cellForRowAtIndexPath : (NSIndexPath *)indexPath {
UILabel * mainLabel, * secondLabel;
UIImageView * photo;
static NSString * CellIdentifier = # "Cell";
UITableViewCell * cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
if (cell == nil) {
cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier] autorelease];
cell.accessoryType = UITableViewCellAccessoryDisclosureIndicator;
mainLabel = [[[UILabel alloc] initWithFrame:CGRectMake(100.0, 0.0, 210.0, 0.0)] autorelease];
mainLabel.tag = MAINLABEL_TAG;
mainLabel.font = [UIFont systemFontOfSize:14.0];
mainLabel.textAlignment = UITextAlignmentRight;
mainLabel.textColor = [UIColor blackColor];
mainLabel.opaque = YES;
mainLabel.autoresizingMask = UIViewAutoresizingFlexibleLeftMargin | UIViewAutoresizingFlexibleHeight;
[cell.contentView addSubview : mainLabel];
secondLabel = [[[UILabel alloc] initWithFrame:CGRectMake(90.0, 30.0, 220.0, 0.0)] autorelease];
secondLabel.tag = SECONDLABEL_TAG;
secondLabel.font = [UIFont systemFontOfSize:12.0];
secondLabel.textAlignment = UITextAlignmentRight;
secondLabel.textColor = [UIColor darkGrayColor];
secondLabel.opaque = YES;
secondLabel.autoresizingMask = UIViewAutoresizingFlexibleLeftMargin | UIViewAutoresizingFlexibleHeight;
[cell.contentView addSubview : secondLabel];
photo = [[[UIImageView alloc] initWithFrame:CGRectMake(30.0, 3.0, 50.0, 40.0)] autorelease];
photo.tag = PHOTO_TAG;
photo.opaque = YES;
photo.autoresizingMask = UIViewAutoresizingFlexibleLeftMargin | UIViewAutoresizingFlexibleHeight;
[cell.contentView addSubview : photo];
} else {
mainLabel = (UILabel *)[cell.contentView viewWithTag : MAINLABEL_TAG];
secondLabel = (UILabel *)[cell.contentView viewWithTag : SECONDLABEL_TAG];
photo = (UIImageView *)[cell.contentView viewWithTag : PHOTO_TAG];
}
// Configure the cell.
mainLabel.text = [[items objectAtIndex:indexPath.row] objectForKey:# "title"];
secondLabel.text = [[items objectAtIndex:indexPath.row] objectForKey:# "teacher"];
NSString * path = [[items objectAtIndex:indexPath.row] objectForKey:# "audimage"];
NSString * mypath = [path stringByTrimmingCharactersInSet:[NSCharacterSet whitespaceAndNewlineCharacterSet]];
NSURL * url = [NSURL URLWithString:mypath];
NSData * data = [NSData dataWithContentsOfURL:url];
UIImage * img = [[UIImage alloc] initWithData:data];
photo.image = img;
return cell;
[cell release];
}

Answer 1

It looks like every time you're configuring a cell, you re-download the entire image from the web (or reading from the hard disk, if that's where your URL points to):
NSData *data = [NSData dataWithContentsOfURL:url];
UIImage *img = [[UIImage alloc] initWithData:data];
This is really slow! The way UITableView works is by reusing cells - every time a cell goes off-screen, it may be given back to the cellForRowAtIndexPath method to be used as the next cell that becomes visible.
This means that every time a new cell becomes visible, you're downloading and creating its image.
Instead, you have two options:
Download and store all the images first (if there are only 12, it probably won't take too much memory).
Download the images as-needed, and if you get a memory warning, dump some of the cached images. This is a bit harder to implement, so I'd try the first solution first.