How to make Images in UITableViewCell scroll smoothly?

Question

I'm loading images into my UITableViewCell and it is becoming choppy. I only have around 5-10 cells max.

Are there any easy ways to fix this?

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    static NSString *CellIdentifier = @"appointmentCell";

    AppointmentTableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];

    NSDictionary *appointmentDictionaryTemp = [self.appointmentArray objectAtIndex:indexPath.row];
    cell.patientNameLabel.text = [appointmentDictionaryTemp objectForKey:@"patient"];
    cell.appointmentTimeLabel.text = [appointmentDictionaryTemp objectForKey:@"scheduled_time"];

    NSString *urlString = [[appointmentDictionaryTemp objectForKey:@"patient_small_photo_url"] stringByAddingPercentEscapesUsingEncoding:NSUTF8StringEncoding];
    NSData * imageData = [NSData dataWithContentsOfURL:[NSURL URLWithString:urlString]];
    UIImage * image = [UIImage imageWithData:imageData];
    cell.patientImage.image = image; 

    return cell;
}

the main problem is in [NSData dataWithContentsOfURL:...] that block your app till the download is completed. To me the easy and faster way to solve this is to use the AFNetworking lib: on it's site you can find some useful expamples on how to download images... — il Malvagio Dottor Prosciutto, Nov 16 '11 at 23:39

score 2 · Answer 1 · answered Nov 16 '11 at 23:41

dataWithContentsOfURL: is your culprit. It performs a synchronous (blocking) network request on the application's main UI thread, causing the table view to lock up while an image is being downloaded.

The solution is much more involved, and it involves using NSURLConnection (or some other 3rd party library) to download the data asynchronously, allowing the UI to remain responsive while the image is being downloaded. This is a good resource to use for reference.

score 1 · Answer 2 · answered Nov 17 '11 at 00:01

Create an ivar called imageCache, which is an NSArray. Now run this code in init:

for (NSDictionary *appointmentDictionaryTemp in self.appointmentArray) {        
    NSString *urlString = [[appointmentDictionaryTemp objectForKey:@"patient_small_photo_url"] stringByAddingPercentEscapesUsingEncoding:NSUTF8StringEncoding];
    NSData * imageData = [NSData dataWithContentsOfURL:[NSURL URLWithString:urlString]];
    UIImage * image = [UIImage imageWithData:imageData];

    [imageCache addObject:image];
}

Now in cellForRowAtIndexPath:

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    static NSString *CellIdentifier = @"appointmentCell";

    AppointmentTableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];

    NSDictionary *appointmentDictionaryTemp = [self.appointmentArray objectAtIndex:indexPath.row];
    cell.patientNameLabel.text = [appointmentDictionaryTemp objectForKey:@"patient"];
    cell.appointmentTimeLabel.text = [appointmentDictionaryTemp objectForKey:@"scheduled_time"];

    cell.patientImage.image = [imageCache objectAtIndex:indexPath.row]; 

    return cell;
}

score 0 · Accepted Answer · edited May 23 '17 at 11:55

0

Load Images asynchronusly and maybe cache them. Start with reading this question: Lazy load images in UITableViewCell

edited May 23 '17 at 11:55

Community

1
1

answered Nov 16 '11 at 23:40

Kai Huppmann

10,705
6
47
78

score 0 · Answer 4 · answered Nov 16 '11 at 23:44

store the images in an NSCache using the index path as the key, then in your tableView: cellForRowAtIndexPath: method, check to see if there is an object for the index path. if there is load it into the image property, and if not, then call a method to generate it. this will stop it being done every time a cell is drawn.

score 0 · Answer 5 · answered Nov 16 '11 at 23:52

0

There is an open source (MIT license) implementation of lazy/cached network of UIImageView images which you should take a look at: SDWebImage. Downloads/caches images asynchronously and automatically updates your UIImageViews.

answered Nov 16 '11 at 23:52

jbat100

16,757
4
45
70

How to make Images in UITableViewCell scroll smoothly?

5 Answers5

Linked