Loading UIImage from NSData causing jerky UITableView scrolling

Question

I am having getting my tableview to scroll smoothly when loading in images from NSData.

Some background ... I'm storing image NSData in Core Data (using the 'allows external storage' option so i dont think storing the URLs or something like that is the solution here). Further, I am storing two types of data, one high res with UIImagePNGRepresentation, and one low res with UIImageJPGRepresentation. I am loading in the low res images for my table view. The image property on the entry object is not stored in core data, its set after the fact. Here is how I am doing it:

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

    DMLogTableViewCell *cell = (DMLogTableViewCell *)[self.tableView dequeueReusableCellWithIdentifier:@"LogCell" forIndexPath:indexPath];

    [cell setGradients:@[[UIColor whiteColor], [UIColor lightTextColor]]];
    Entry *entry = [self.fetchedResultsController objectAtIndexPath:indexPath];
    UIImage *entryImage = entry.image;

    if (entryImage)
        cell.rightImageView.image = entryImage;
    else {
        NSOperationQueue *oQueue = [[NSOperationQueue alloc] init];
        [oQueue addOperationWithBlock:^(void) {
            UIImage *image = [UIImage imageWithData:entry.photo.lowResImageData];
            if (!image) image = [UIImage imageNamed:@"defaultImage.png"];
            entry.image = image;
        }];
        [oQueue addOperationWithBlock:^(void) {
            [[NSOperationQueue mainQueue] addOperationWithBlock:^(void) {
                DMLogTableViewCell *cell = (DMLogTableViewCell *)[self.tableView cellForRowAtIndexPath:indexPath];
                cell.rightImageView.image = entry.image;
            }];
        }];

    }

    return cell;
}

Any ideas on how to get this to run more smoothly? Any help is greatly appreciated!

Thanks

UPDATE

This has gotten me much closer, but there is still a little bit of jerkiness . . . (within cellForRowAtIndexPath)

    UIImage *entryImage = entry.image;

    if (entryImage)
        cell.rightImageView.image = entryImage;
    else {
        [self.imageQueue addOperationWithBlock:^(void) {
            UIImage *image = [UIImage imageWithData:entry.photo.lowResImageData];
            if (!image) image = [UIImage imageNamed:@"bills_moduleIcon.png"];
            entry.image = image;
            [entry.image preload];

            [[NSOperationQueue mainQueue] addOperationWithBlock:^(void) {
                DMLogTableViewCell *cell = (DMLogTableViewCell *)[self.tableView cellForRowAtIndexPath:indexPath];
                cell.rightImageView.image = entry.image;
            }];
        }];
    }

that preload method is in a cateogory on UIImageView and looks like this:

- (void)preload
{
    CGImageRef ref = self.CGImage;
    size_t width = CGImageGetWidth(ref);
    size_t height = CGImageGetHeight(ref);
    CGColorSpaceRef space = CGColorSpaceCreateDeviceRGB();
    CGContextRef context = CGBitmapContextCreate(NULL, width, height, 8, width * 4, space, kCGImageAlphaPremultipliedFirst);
    CGColorSpaceRelease(space);
    CGContextDrawImage(context, CGRectMake(0, 0, width, height), ref);
    CGContextRelease(context);
}

I think my next plan of attack is to mess around with the size of the images stored (as mentioned in the comments) or perhaps trying to not update the imageViews while the table is scrolling. Any thoughts on those two methods are much appreciated! ill check back in when i've done that

UPDATE 2 Many many thanks for everyone who helped me out with this! Here was the final solution (in cellForRowAtIndexPath:

    if (entryImage)
        cell.rightImageView.image = entryImage;
    else {
        [self.imageQueue addOperationWithBlock:^(void) {
            UIImage *image = [UIImage imageWithData:entry.photo.lowResImageData];
            if (!image) image = [UIImage imageNamed:@"bills_moduleIcon.png"];
            entry.image = [image scaleToSize:cell.rightImageView.frame.size];

            [[NSOperationQueue mainQueue] addOperationWithBlock:^(void) {
                DMLogTableViewCell *cell = (DMLogTableViewCell *)[self.tableView cellForRowAtIndexPath:indexPath];
                cell.rightImageView.image = entry.image;                
            }];
        }];
    }

adding a new category method to UIImage:

-(UIImage*)scaleToSize:(CGSize)size
{
    UIGraphicsBeginImageContext(size);
    [self drawInRect:CGRectMake(0, 0, size.width, size.height)];
    UIImage* scaledImage = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    return scaledImage;
}

Scrolling is now perfectly smooth. Awesome

Appreciate the help. Resizing was indeed the final issue messing with the scroll performance. Thanks! — Sean Danzeiser

Rob Rob · Accepted Answer · 2013-01-27T22:33:13

A couple of issues:

I'd want to see how much time these two lines are taking:
```
Entry *entry = [self.fetchedResultsController objectAtIndexPath:indexPath];
UIImage *entryImage = entry.image;
```
While I gather that entry.image is a cached image, I wouldn't be so confident that objectAtIndexPath:indexPath isn't actually retrieving the NSData from Core Data (which is a good portion of the performance issue in storing images in a local database rather than the file system). I'd be inclined to do this in the background queue.

I don't understand why you're adding two operations to oQueue (which could operate concurrently!). It should just be as follows, so you don't try to dispatch to main queue until the image is retrieved:

[oQueue addOperationWithBlock:^(void) {
    UIImage *image = [UIImage imageWithData:entry.photo.lowResImageData];
    if (!image) image = [UIImage imageNamed:@"defaultImage.png"];
    entry.image = image;

    [[NSOperationQueue mainQueue] addOperationWithBlock:^(void) {
        DMLogTableViewCell *cell = (DMLogTableViewCell *)[self.tableView cellForRowAtIndexPath:indexPath];
        cell.rightImageView.image = entry.image;
    }];
}];

It's probably not material, but you really shouldn't create a new NSOperationQueue for each cell. You should define a class property that is a NSOperationQueue, initialize it in viewDidLoad, and then use that queue in cellForRowAtIndexPath. It's not material, I'm sure, but it's not worth the overhead of creating a queue for each row of your table. (And if you ever go to server-based image retrieval, using a single queue is very important so you can control the maxConcurrentOperationCount.)

Loading UIImage from NSData causing jerky UITableView scrolling

2 Answers