iOS - Fix cellForItemAtIndexPath image loading issue - ios

Question

I am building an app with lots of large image files that are to be displayed in a collection view. Because of the size of the images I've found that it is much quicker to create thumbnails from their URLs, as well as use image caching. When I first implemented this in cellForItemAtIndexPath using GCD I saw a huge reduction in UI lag, but I also noticed that the images in the cells would flicker and change rapidly when the collection view was brought into view and scrolled. I found some other posts about similar issues and they said that checking if the cell is nil first should fix the issue, but unfortunately this seems to create another issue in which many of the images never get loaded. Does anyone know how to fix this?
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
PhotoCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:reuseIdentifier forIndexPath:indexPath];
ObjectWithPhoto *object = self.objects[indexPath.item];
cell.imageView.image = nil;
NSString *imageName = object.imageName;
NSString *imageKey = [NSString stringWithFormat:#"%#_thumbnail", imageName];
if ([[ImageCache sharedCache] imageForKey:imageKey]) {
cell.imageView.image = [[ImageCache sharedCache] imageForKey:imageKey];
} else {
dispatch_async(dispatch_get_global_queue( DISPATCH_QUEUE_PRIORITY_DEFAULT, 0), ^(void) {
NSURL *imageURL = [[NSBundle mainBundle] URLForResource:imageName withExtension:#"jpg"];
CGSize imageSize = CGSizeMake(self.view.frame.size.width, self.view.frame.size.width);
UIImage *thumbnail = [UIImage createThumbnailFromURL:imageURL imageSize:imageSize];
[[ImageCache sharedCache] setImage:thumbnail forKey:imageKey];
dispatch_async(dispatch_get_main_queue(), ^(void) {
PhotoCell *cellToUpdate = (id)[collectionView cellForItemAtIndexPath:indexPath];
if (cellToUpdate) {
cellToUpdate.imageView.image = thumbnail;
} else {
NSLog(#"cell is no long visible");
}
});
});
}
return cell;
}

Answer 1

Maybe you're satisfied with your solution, but I'm not. I think at least one source of weirdness you were seeing is from not clearing the image (or setting it to a placeholder) in the case where the image you need isn't cached. Remember, as soon as you begin scrolling, the images won't be in the cache but the reused cell's images will be set -- and wrongly so, to images for other indexPaths. So, fix one...
if ([[ImageCache sharedCache] imageForKey:imageKey]) {
cell.imageView.image = [[ImageCache sharedCache] imageForKey:imageKey];
} else {
// fix one: clear the cell's image now, if it's set, it's wrong...
cell.imageView.image = nil; // or a placeholder
dispatch_async(dispatch_get_global_queue( DISPATCH_QUEUE_PRIORITY_DEFAULT, 0), ^(void) {
// ...
Second, I throw a yellow flag whenever I see somebody call their own cellForItem datasource method and poke values into the cell. This is more concise and more polite....
cell.imageView.image = nil; // or a placeholder
dispatch_async(dispatch_get_global_queue( DISPATCH_QUEUE_PRIORITY_DEFAULT, 0), ^(void) {
NSURL *imageURL = [[NSBundle mainBundle] URLForResource:imageName withExtension:#"jpg"];
CGSize imageSize = CGSizeMake(self.view.frame.size.width, self.view.frame.size.width);
UIImage *thumbnail = [UIImage createThumbnailFromURL:imageURL imageSize:imageSize];
[[ImageCache sharedCache] setImage:thumbnail forKey:imageKey];
dispatch_async(dispatch_get_main_queue(), ^(void) {
// fix two: don't get the cell. we know the index path, reload it!
[collectionView reloadItemsAtIndexPaths:#[indexPath]];
// deleted evil stuff that was here
});
});

Answer 2

I think I figured out a fix for this. When checking if the cell was still available or nil, it seemed to return nil even when I swear I could still see it on screen. With this in mind I tried telling the collection view to reload data if the cell came back nil and it works! Smooth scrolling and full of non-flickering images.
PhotoCell *cellToUpdate = (id)[self.collectionView cellForItemAtIndexPath:indexPath];
if (cellToUpdate) {
cellToUpdate.imageView.image = thumbnail;
} else {
NSLog(#"cell is no long visible");
[self.collectionView reloadData];
}