UITableViewCell using reuseidentifier giving unwanted result with callback block

Question

When the callback block for loadImage is run below, the table cell may have since been reused. So the image is applied to "imageView" is not relevant to this reused cell, it's the image for the old cell.

If I make the identifier unique for each cell that has an image, the problem goes away. But this gives poor performance with many results.

Can I somehow use the same reuse identifier with a callback block and have the images turn up in the correct cells?

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

    NSDictionary *place;
    PlaceTableViewCell *cell; // UITableViewCell subclass
    NSString *identifier = @"PlaceTableViewCell";

    if (cell == nil) {

        NSArray *objects;

        objects = [[NSBundle mainBundle] loadNibNamed:@"PlaceTableViewCell" owner:self options:nil];

        for(id object in objects) {

            if([object isKindOfClass:[PlaceTableViewCell class]]) {                
                cell = (PlaceTableViewCell *)object;                
                break;
            }
        }
    }

    UIImageView *imageView;
    if((imageView = (UIImageView*)[cell viewWithTag:1])) {

        NSString *filename;
        int placeImageId = 0;
        place = [places objectAtIndex:indexPath.row];

        if(place) {

            placeImageId = [[d objectForKey:@"placeImageId"] intValue];

            if(placeImageId) {

                [[RestAPIConnector sharedInstance] loadImage :placeImageId :@"thumb" :^(NSString *response){

                    NSDictionary *image = [response JSONValue];

                    if ([image objectForKey:@"img"]) {

                        NSString *b64Img = [image objectForKey:@"img"];
                        UIImage *ui = [UIImage imageWithData:[Base64 decode:b64Img]];

                        imageView.image = ui;
                    }
                }];            
            }
        }
    }

    return cell;
}

score 1 · Accepted Answer · answered Apr 27 '12 at 02:33

here is what I'm doing.

instead of using the cell directly, I'm passing in the index path

if(user.profileImage == nil)
{
    if (self.tableView.dragging == NO && self.tableView.decelerating == NO) {
        NSLog(@"file for user %d doesn't exist", [user.userId intValue]);
        [self startUserProfileImageDownload:user forIndexPath:indexPath];
    }
}
else
{
    cell.profileImageView.image = user.profileImage;

}

once the download is complete, use the index path to retrieve the cell, and update the image

MessageCell *cell = (MessageCell *)[self.tableView cellForRowAtIndexPath:path];

// Display the newly loaded image
cell.profileImageView.image = user.profileImage;
CALayer *roundedLayer = [cell.profileImageView layer];

MessageCell is my custom cell. if you don't have use customer cell, you can use Tag to retrieve the imageView back.

score 1 · Answer 2 · answered May 01 '12 at 04:40

I'd create a dictionary to hold the images, then attempt to read from the dictionary in cellForRowAtIndexPath:

@property(retain)NSMutableDictionary *imageData;

//...

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

    //...

    UIImageView *imageView;
    if((imageView = (UIImageView*)[cell viewWithTag:1])) {
        int placeImageId = 0;
        place = [places objectAtIndex:indexPath.row];
        if(place) {
            placeImageId = [[d objectForKey:@"placeImageId"] intValue];
            if(placeImageId) {
                NSObject *image = [imageData objectForKey:[NSNumber numberWithInt:placeImageId]];
                if ([image isKindOfClass:[UIImage class]) {
                    imageView.image = (UIImage *)image;
                } else if (![image isEqual:@"downloading"]) {
                    [imageData addObject:@"downloading" forKey:[NSNumber numberWithInt:placeImageId]];
                    [[RestAPIConnector sharedInstance] loadImage:placeImageId onSuccess:^(NSString *response){
                        NSDictionary *image = [response JSONValue];
                        if ([image objectForKey:@"img"]) {
                            NSString *b64Img = [image objectForKey:@"img"];
                            [imageData addObject:[UIImage imageWithData:[Base64 decode:b64Img]] forKey:[NSNumber numberWithInt:placeImageId]];
                        }
                    }];            
                }
            }
        }
    }
    return cell;
}

Some potential optimizations:

As in @Jun1st's sample, don't load images for cells while scrolling
Add download operations to an NSOperationQueue and prioritize the most recently requested ones first (deprioritizing the ones that have scrolled by)
Save downloaded images to the filesystem and check there first

UITableViewCell using reuseidentifier giving unwanted result with callback block

2 Answers2