TableView scrolling stutters after adding images from remote URL - ios

Question

I am building an iOS app that adds XML items to a TableView (among other things, of course). I would like to display the article's thumbnail in the TableView cell or a default placeholder if the article's thumbnail field is empty.
The code below adds the thumbnail from the article but then causes scrolling to stutter quite a bit. If I only use the placeholder image for each cell, everything is fine. I am guessing I am probably not using the most ideal method to add the thumbnail image, not sure if this is causing the problem.
-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:#"idCellNewsTitle"];
if (cell == nil) {
cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:#"idCellNewsTitle"];
}
NSDictionary *dict = [self.arrNewsData objectAtIndex:indexPath.row];
cell.imageView.image = [UIImage imageNamed:#"holder-small.jpg"];
cell.textLabel.text = [dict objectForKey:#"title"];
cell.detailTextLabel.text = [dict objectForKey:#"pubDate"];
if ([dict objectForKey:#"thumbnail"] != nil) {
NSData *imgData = [NSData dataWithContentsOfURL:[NSURL URLWithString: [dict objectForKey:#"thumbnail"]]];
if (imgData) {
UIImage *image = [UIImage imageWithData:imgData];
if (image) {
cell.imageView.image = image;
}
}
}
return cell;
}
Coding in the latest XCode, testing in simulator and on a newer iPod - results are the same with both. No warnings or errors during the running of the app, CPU spikes at 1% when scrolling and memory stays around 16 MB.
UPDATE - Video
Here is a video demonstrating this issue for any future noobs to compare with -
First example is with a placeholder, second is without.
Video on YouTube

Answer 1

replace your code in cellForRowAtIndexPath:
after this line if ([dict objectForKey:#"thumbnail"] != nil)
That way you load each image in the background and as soon as its loaded the corresponding cell is updated on the mainThread.
dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_BACKGROUND, 0), ^(void) {
NSData *imgData = NSData *imgData = [NSData dataWithContentsOfURL:[NSURL URLWithString: [dict objectForKey:#"thumbnail"]]];
if (imgData) {
UIImage *image = [UIImage imageWithData:imgData];
dispatch_sync(dispatch_get_main_queue(), ^(void) {
UIImage *image = [UIImage imageWithData:imgData];
if (image) {
cell.imageView.image = image;
}
});
});
LazyTableImages Reference

Answer 2

Fetch images using GCD
// Fetch using GCD
dispatch_queue_t downloadThumbnailQueue = dispatch_queue_create("Get Photo Thumbnail", NULL);
dispatch_async(downloadThumbnailQueue, ^{
UIImage *image = [self getTopPlacePhotoThumbnail:photo];
dispatch_async(dispatch_get_main_queue(), ^{
UITableViewCell *cellToUpdate = [self.tableView cellForRowAtIndexPath:indexPath]; // create a copy of the cell to avoid keeping a strong pointer to "cell" since that one may have been reused by the time the block is ready to update it.
if (cellToUpdate != nil) {
[cellToUpdate.imageView setImage:image];
[cellToUpdate setNeedsLayout];
}
});
});