UITableView is laggy when scrolling up

Question

Solution: Use SDWebImage: https://github.com/rs/SDWebImage

I have a UITableView which becomes very laggy when during scrolling. I discovered the lag appears when the image that I am using is coming back on the screen.

I am using a custom UITableViewCell. Is this also a reason why it's lagging?

My custom UITableViewCell:

My code:

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {

NSString *CellIdentifier = [NSString stringWithFormat:@"Cell%d%d",indexPath.row,indexPath.section];


tableViewCellActiviteiten *cell = (tableViewCellActiviteiten *)[self.tableView dequeueReusableCellWithIdentifier:CellIdentifier];

if (cell == nil)
{

    NSArray *nib = [[NSBundle mainBundle] loadNibNamed:@"tableViewCellActiviteiten" owner:self options:nil];
    cell = (tableViewCellActiviteiten *)[nib objectAtIndex:0];
}


cell.thetitle.text = [self.alletitels objectAtIndex:indexPath.row];
cell.thesubtitle.text = [self.allesubtitels objectAtIndex:indexPath.row];

NSString * imagePath = [self.alleimages objectAtIndex:indexPath.row];

NSURL * imageURL = [NSURL URLWithString:imagePath];
NSData * imageData = [NSData dataWithContentsOfURL:imageURL];
UIImage * image = [UIImage imageWithData:imageData];

cell.image.image = image;

return cell;

}

Content of the arrays:

self.alletitels contains a string: "Activity Title"

self.allesubtitels contains a string: "Activity Subtitle"

self.alleimages contains a url: "http://m2.myhappygames.com//files/pics/0/Paranormal_Shark_Activity_3.jpg"

Can anyone advise what might be the cause of the laggy scrolling?

Answer 1

The problem is that every time tableView: cellForRowAtIndexPath: method is called your code generates an image. This will be called each time a cell appears on the screen, therefore if you scroll really fast this method will start allocating a lot of images synchronously which will slow down the scroll.

As a fast solution, implement NSCache in your View Controller and store images in it.

UIImage *image = [_imageCache objectForKey:@indexPath.row];
if (image == nil) {
    NSString * imagePath = [self.alleimages objectAtIndex:indexPath.row];
    NSURL * imageURL = [NSURL URLWithString:imagePath];
    NSData * imageData = [NSData dataWithContentsOfURL:imageURL];
    image = [UIImage imageWithData:imageData];
    [_imageCache setObject:image forKey:@indexPath.row];
}

cell.image.image = image;

_imageCahce is an instance variable of view controller that you can implement.

Hope this helps, cheers!

Answer 2

These two lines here:

NSData * imageData = [NSData dataWithContentsOfURL:imageURL];
UIImage * image = [UIImage imageWithData:imageData];

Are what is dramatically slowing down your table performance.

You're doing synchronous fetching and loading of image data every time you refresh that cell.

It would be smarter to somehow cache (or save locally) the images to be displayed. And if they aren't saved locally or in a cache, only then go fetch those images (and do that asychronously, outside of that "cellForRowAtIndexPath:" method).