UICollectionView with NINetworkImageViews repeats images

Question

I'm using NINetworkImageView from Nimbuskit. I have a simple UICollectionView showing a grid of images (NINetworkImageViews). Normally it works like a charm, but in certain situations some of the NINetworkImageViews show a wrong image.

I think it happens when there is no path for the image and NINetworkImageView has to show the default image. Sometimes (few times) instead of showing the default image, it appears other image belonging to other NINetworkImageView of the CollectionView.

Here is the related code:

- (UICollectionViewCell*) collectionView:(UICollectionView *)collectionView   cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
    static NSString *cellIdentifier = @"ShelvingCell";
    ShelvingCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:cellIdentifier forIndexPath:indexPath];

    // Prueba para ver si esto arregla lo de que se repitan imágenes
    [cell.feedNetworkImageView prepareForReuse];

    cell.feedNetworkImageView.delegate = self;

    // El collage necesita un tratamiento especial
    if (indexPath.section == 0 && indexPath.row == 0)
    {
        cell.feedTitleLabel.text = @"";
        cell.lastFeedNewTitleLabel.text = @"";
        // Prueba para ver si esto arregla lo de que se repitan imágenes
        [cell.feedNetworkImageView setPathToNetworkImage:@""];

        // Prueba para ver si esto arregla lo de que se repitan imágenes
        [cell.feedNetworkImageView prepareForReuse];

        cell.feedNetworkImageView.image = [UIImage imageNamed:@"collage.png"];
    }
    else
    {    
        MOFeed *feed = [self.feeds objectAtIndex:(indexPath.section*3 + indexPath.row - 1)];
        cell.feedTitleLabel.text = feed.title;

        // Recuperamos la última noticia del feed
        MONoticia *ultimaNoticia = [feed lastFeedNew];

        cell.lastFeedNewTitleLabel.text = ultimaNoticia.title;

        if (![feed.feedImageURL isEqualToString:@""] && feed.feedImageURL)
        {
            // Prueba para ver si esto arregla lo de que se repitan imágenes
            [cell.feedNetworkImageView prepareForReuse];
            [cell.feedNetworkImageView setPathToNetworkImage:feed.feedImageURL];
        }
        else
        {
            // Prueba para ver si esto arregla lo de que se repitan imágenes
            [cell.feedNetworkImageView prepareForReuse];

            cell.feedNetworkImageView.image = [UIImage imageNamed:@"shelvingcell.png"];
            // Prueba para ver si esto arregla lo de que se repitan imágenes
            [cell.feedNetworkImageView setPathToNetworkImage:@""];
        }
    }
    return cell;
}

Thanks a lot!

Carlos

Answer 1

I had the same problem, and when i dig into the issue, it looks like

[cell.feedNetworkImageView prepareForReuse];

didn't cancel all download operation. you have to do a little hack

before call

[cell.feedNetworkImageView setPathToNetworkImage:feed.feedImageURL];

cancel all network operation operation and then create a new network operation

[self.displayImage.networkOperationQueue cancelAllOperations];
self.displayImage.networkOperationQueue = [[NSOperationQueue alloc]init];
[cell.feedNetworkImageView setPathToNetworkImage:feed.feedImageURL];

it's not as efficient since you each image download need it's own operation queue so it can be cancelled. this may need a little bit more work to make it more efficient. but so far it looks like there is no repeated images

Answer 2

Carlos, I don't know much about NINetworkImageView, but my theory is that UICollectionView is reusing your views, and you don't cancel the request. Say you load the first cell, and then a request is being triggered for that image. Then you start scrolling. That first cell is reused before the first request finishes, and probably this new item reusing that cell does not have an image, so you don't call setPathNetwork... The result, the new reused cell will have the first cell image.

Probably there is a method in NINetworkImageView to cancel the request. Call it everytime you reuse one of these views.

Un saludo!