UICollectionView + SDWebImage + Cell reuse

Question

I have a UICollectionView with a custom UICollectionViewCell class which adds another UIView (thumbnailView) to its contentView. This other view has a UIImageView property (imageView) whose image gets loaded with SDWebImage asynchronously. This all works fine until the cell is reused while the image of the original cell is still being loaded. If you scroll fast enough through the CollectionView images start to pop up in cells where they are not supposed to be (probably because the cell got reused and the image download finishes afterwards), just to get replaced as soon as the correct image for the reused cell finishes loading.

To fix this, I added the following to my UICollectionViewCell subclass to stop the original cell's image download:

- (void)prepareForReuse
{
    [super prepareForReuse];
    [self.thumbnailView.imageView cancelCurrentImageLoad];
}

But to my surprise, this seems to change absolutely nothing. Am I doing something wrong or am I just looking in the wrong direction?

Answer 1

If I understand your problem correctly, you are getting old images still appearing in reused cells so in addition to stopping the previous image load you probably want to remove the old image from the imageView. SDImageView might have a method to clear the image or else you could just manually replace it with a placeholder image.

- (void)prepareForReuse
{
    [super prepareForReuse];
    [self.thumbnailView.imageView cancelCurrentImageLoad];
    [self.thumbnailView.imageView setImage:<<LOCAL PLACEHOLDER IMAGE>> forState:UIControlStateNormal];
}

Answer 2

The UITableViewDelegate and UICollectionViewDelegate method -tableView:didEndDisplayingCell:forRowAtIndexPath: is the best place to update your UITableView | UICollectionView cells after it has disappeared. You can cancel the cell downloads there.

Answer 3

Swift 4 - Add to your cell's class:

override func prepareForReuse() {
  super.prepareForReuse() 
  self.contentImageView.sd_cancelCurrentImageLoad()
  self.contentImageView.image = UIImage(named: "") // set to default/placeholder image
}

Answer 4

I tried both didEndDisplayCell() and prepareForReuse(), neither of them work. A work round way is to set imageView.image as nil then assign to the specific image, then it will not blink the old image as background. (but it will be slower since it has to do the "clean" job first).

Answer 5

SWIFT 4

Before setting new image to imageView add:

cell.imageView.sd_currentDownloadTask?.cancel()