Asynchronous loading image inside uitableviewcell

Question

Hello I am trying to use EGOImageView inside a CustomTableViewCell who i made to customize the cell. This is the code where I used the EGOImageView.

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

CustomTableCell* cell = (CustomTableCell*)[tableView dequeueReusableCellWithIdentifier:simpleTableIdentifier];

if (!cell)
{
   cell = [[CustomTableCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:simpleTableIdentifier];

    NSLog(@"Show once or more times");
}

NSDictionary* dictionary = (NSDictionary*)[self.albumCollection objectAtIndex:indexPath.row];

cell.label.text = [dictionary valueForKey:@"name"];

EGOImageView* imageView = [[EGOImageView alloc] initWithPlaceholderImage:[UIImage imageWithContentsOfFile:@""]];
[imageView setImageURL:[NSURL URLWithString:[NSString stringWithFormat:@"https://graph.facebook.com/%@/picture?type=small&access_token=%@", (NSString*)[dictionary valueForKey:@"id"], [[FBSession activeSession] accessToken]]]];
[imageView setFrame:CGRectMake(0.0f,0.0f,78.0f,78.0f )];


[cell.iView addSubview:imageView];
[imageView release];

The image on each cell loading the same image. Would it be because it reused the cell while loading the image.

I found a problem I can't think of why the problem happened. I used the graph api to grab the image https://graph.facebook.com/%@/picture?type=small&access_token=%@ where the first parameter was the album id.

To make myself easy to see the problem I only used one album on the cell, no matter what album i used the same photo turned up. But when I copy the link to the browser, the actual photo url shown on the address bar with the image shown and it shown the correct photos.

Does anyone know what was wrong.

Answer 1

Here is example. It loads user pics from some server in background and updates cell image. Note that imageView.image is set to nil at the beginning. This is dome for the case of cell reuse so that you will have no image rather than wrong image for the time while its downloading.

One more thing to add is that, would be also good to have a cache so that it does not download images all the time. Another nice thing is to not download images in edge networks.

- (UITableViewCell *)tableView:(UITableView *)_tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
static NSString *CellIdentifier = @"TransactionCell";
        NSMutableArray *data = searching ? searchResult : dataSource;
        NSDictionary *object = [data objectAtIndex:[indexPath row]];

        UITableViewCell *cell = [_tableView dequeueReusableCellWithIdentifier:CellIdentifier];
        if (cell == nil) {
                cell = [[[UITableViewCell alloc] initWithIdentifier:CellIdentifier] autorelease];
        }
        cell.imageView.image = nil;
        cell.textLabel.text = @"Your cell text";
        NSString *contact = @"[email protected]";
        dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0), ^{
                        NSData *imgData = [appDelegate addUserPic:contact];
                        if (imgData == nil && netStatus == ReachableViaWiFi) {
                                NSString *url = [NSString stringWithFormat:@"http://somehost.com/userpic/%@", contact];
                                imgData = [NSData dataWithContentsOfURL:[NSURL URLWithString:url]];
                        }
                        dispatch_async(dispatch_get_main_queue(), ^{
                                UITableViewCell *updateCell = [self.tableView cellForRowAtIndexPath:indexPath];
                                if (updateCell) {
                                        if (imgData) {
                                                [appDelegate setUserPic:contact imgData:imgData];
                                                updateCell.imageView.image = [UIImage imageWithData:imgData];
                                        } else {
                                                updateCell.imageView.image = nil;
                                        }
                                        /* This forces the cell to show image as now
                                           it has normal bounds */
                                        [updateCell setNeedsLayout];
                                }
                        });
                });
        return cell;
}