UITableView slow scrolling because of images

[dciso]

Hey, I just need some advice. Ive nearly completed my first iphone app and ive just got one problem to sort before its done. At the minute ive got a UITableView with images in each cell that are loaded from a server (see a screenshot here). On wifi it will scroll fine but on 3G it won’t scroll smoothly because it waits until the image is loaded before continuing to scroll. Ive seen in most apps (ebay for example) that it will still scroll even if the images havnt loaded it yet. I was wondering how to achieve that effect? Cheers, Jason.

[dciso]

Ive included my code below:

// Customize the appearance of table view cells.
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    
    
	UITableViewCell *cell =
	[tableView dequeueReusableCellWithIdentifier:@"cell"];
	
	// create a cell
	if ( cell == nil)
	{
		cell = [[UITableViewCell alloc]
				initWithStyle:UITableViewCellStyleSubtitle
				reuseIdentifier:@"cell"];
	}
	
	// fill it with contents
	NSDictionary *dict = [NSDictionary dictionaryWithDictionary: [manuArray objectAtIndex:indexPath.row]]; 
	cell.textLabel.text = [dict objectForKey:@"manufacturer_name"];
	cell.textLabel.font = [UIFont systemFontOfSize:14.0];
	cell.accessoryType = UITableViewCellAccessoryDisclosureIndicator;
	
	NSString *noProducts = [NSString stringWithFormat:@"%@",[dict objectForKey:@"no_products_found"]];
	
	if([noProducts isEqualToString:@"1"]==TRUE){
		cell.detailTextLabel.text = [NSString stringWithFormat:@"%@ item found", noProducts];
	} else {
		cell.detailTextLabel.text = [NSString stringWithFormat:@"%@ items found", noProducts];
	}
	
	
	
	NSData *imgData;

	
	if([[dict objectForKey:@"image_url"] isEqualToString:@"none"]==FALSE) {
		NSString *urlString = [NSString stringWithFormat:@"http://172.16.7.80/psyche%@",[dict objectForKey:@"image_url"]];
		NSURL *imgUrl = [NSURL URLWithString: urlString];
		imgData = [NSData dataWithContentsOfURL:imgUrl]; 
	} else {
		NSString *imagefile = [[NSBundle mainBundle] 
							   pathForResource:@"no_image" ofType:@"png"];
		imgData = [NSData dataWithContentsOfFile: imagefile];
	}
	
	//set the image on the table cell
	cell.imageView.image =  [UIImage imageWithData: imgData]; 
	return cell;
}

[wuf810]

Originally Posted by dciso

Hey, I just need some advice. Ive nearly completed my first iphone app and ive just got one problem to sort before its done. At the minute ive got a UITableView with images in each cell that are loaded from a server (see a screenshot here). On wifi it will scroll fine but on 3G it won’t scroll smoothly because it waits until the image is loaded before continuing to scroll. Ive seen in most apps (ebay for example) that it will still scroll even if the images havnt loaded it yet. I was wondering how to achieve that effect? Cheers, Jason.

There are many example apps (including source) demoing this. In fact I think Apple even have a demo.

Much easier for you to check out the examples directly. It's not difficult so sure you'll get it implemented quickly.

M.

[dciso]

Cheers for your reply, got it sorted. I'd recommend using this simple extension to UIImageView.

[iphone_bharat]

-EDIT-

[fhsjaagshs]

The ebay app threads the image-setting:

1. Create an NSDictionary for each cell, add an indexPath.row number and image name/url
2. When an image downloads, set the image using the NSDictionary. This action is most likely threaded.

[ckgni]

Have a look at the LazyTableImages sample Xcode project provided by Apple.
You can download the sample project here:
LazyTableImages

It loads first the text and then the images and the scrolling is very smooth.