UITableView experiences intermittent scrolling when a cell has UIImageView

Question

This led me crazy for most of the day.

I have a UITableView with UIImageViews. These images look at the locally saved PNG file in the cellForRow function of the tableview, and this works fine, except that the tableview stops scrolling for a split second when the cell with the image in it scrolls in the field of view to speak. I poisoned StackOverflow and google for an answer, but I came up with a short one, so any help would be greatly appreciated.

Here is my code for the CellForRow function:

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath { UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"MyIdentifier"]; if (cell == nil) { cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:@"MyIdentifier"] autorelease]; cell.accessoryType = UITableViewCellAccessoryDisclosureIndicator; } if([currSection isEqualToString:@"composer"]){ MySlide *s = [slidesArray objectAtIndex:indexPath.row]; cell.textLabel.hidden = YES; UIImageView *whiteView = [[UIImageView alloc] initWithFrame:CGRectMake((projectsTable.frame.size.width/2)-150, 4, 204.8, 153.6)]; if([s.slideImage isEqualToString:@""] || s.slideImage == nil){ //no custom image in this cell - go with default background image whiteView.image = [UIImage imageNamed:@"cellback2.png"]; whiteView.backgroundColor = [UIColor whiteColor]; }else{ cell.layer.shouldRasterize = YES; cell.layer.rasterizationScale = [UIScreen mainScreen].scale; NSData *data = [[NSData alloc] initWithContentsOfFile:s.slideImage]; UIImage *im = [[UIImage alloc] initWithData:data]; whiteView.image = im; whiteView.image = [self imageWithImage:whiteView.image CovertToSize:CGSizeMake(204.8,153.6)]; whiteView.backgroundColor = [UIColor whiteColor]; } [cell.contentView addSubview:whiteView]; [whiteView release]; cell.accessoryType = UITableViewCellAccessoryNone; } return cell; } 

Answer 1

There are several changes that need to be made, first you should add a UIImageView when the cell is generated, and not every time when the tableView:cellForRowAtIndexPath: hits (as @Vishy suggests). Secondly, you must cache the images that you download from the document directory ( [UIImage imageNamed:] does this automatically for package resources).

 @interface MyViewController () { NSMutableDictionary *_imageCache; } @end @implementation MyViewController - (void)viewDidLoad { [super viewDidLoad]; // other viewDidLoad stuff... _imageCache = [[NSMutableDictionary alloc] init]; } - (void)viewDidUnload { [super viewDidUnload]; // other viewDidUnload stuff... [_imageCache release]; _imageCache = nil; } - (void)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath { UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"MyIdentifier"]; if (cell == nil) { cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:@"MyIdentifier"] autorelease]; cell.accessoryType = UITableViewCellAccessoryDisclosureIndicator; UIImageView *whiteView = [[UIImageView alloc] initWithFrame:CGRectMake((projectsTable.frame.size.width/2)-150, 4, 204.8, 153.6)]; whiteView.tag = 111; whiteView.backgroundColor = [UIColor whiteColor]; [cell.contentView addSubview:whiteView]; [whiteView release]; cell.accessoryType = UITableViewCellAccessoryNone; cell.textLabel.hidden = YES; } UIImageView* iView = (UIImageView*) [cell.contentView viewWithTag:111]; if([currSection isEqualToString:@"composer"]) { MySlide *s = [slidesArray objectAtIndex:indexPath.row]; if([s.slideImage isEqualToString:@""] || s.slideImage == nil) { //no custom image in this cell - go with default background image iView.image = [UIImage imageNamed:@"cellback2.png"]; } else { cell.layer.shouldRasterize = YES; cell.layer.rasterizationScale = [UIScreen mainScreen].scale; // use the image path as the cache key UIImage *theImage = [_imageCache objectForKey:s.slideImage]; if (theImage == nil) { // load the image and save into the cache theImage = [UIImage imageWithContentsOfFile:s.slideImage]; theImage = [self imageWithImage:theImage CovertToSize:CGSizeMake(204.8, 153.6)]; [_imageCache setObject:theImage forKey:s.slideImage]; } iView.image = theImage; } } } @end 

As a rule, tableView:cellForRowAtIndexPath: is a method that you need to exit quickly , so avoid loading images from disk whenever possible.

Answer 2

Change the code below ...

 - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath { UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"MyIdentifier"]; if (cell == nil) { cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:@"MyIdentifier"] autorelease]; cell.accessoryType = UITableViewCellAccessoryDisclosureIndicator; UIImageView *whiteView = [[UIImageView alloc] initWithFrame:CGRectMake((projectsTable.frame.size.width/2)-150, 4, 204.8, 153.6)]; whiteView.tag = 111; whiteView.backgroundColor = [UIColor whiteColor]; [cell.contentView addSubview:whiteView]; [whiteView release]; cell.accessoryType = UITableViewCellAccessoryNone; cell.textLabel.hidden = YES; } UIImageView* iView = (UIImageView*) [cell.contentView viewWithTag:111]; if([currSection isEqualToString:@"composer"]) { MySlide *s = [slidesArray objectAtIndex:indexPath.row]; if([s.slideImage isEqualToString:@""] || s.slideImage == nil) { //no custom image in this cell - go with default background image iView.image = [UIImage imageNamed:@"cellback2.png"]; } else { cell.layer.shouldRasterize = YES; cell.layer.rasterizationScale = [UIScreen mainScreen].scale; iView.image = [UIImage imageWithContentsOfFile:s.slideImage]; iView.image = [self imageWithImage:iView.image CovertToSize:CGSizeMake(204.8,153.6)]; } } } 

Answer 3

The first time every UIImage is displayed. For details, see this post to indicate the time of work in cache time, and not the time of display:

Setting the UIImageView image property causes a significant lag