Wrong images by fast scrolling UITableView

Question

I've an app that provides product information. The information (including images) come from the internet.

It works okay, but when I scroll fast I'll see the wrong picture until the correct one has loaded. How can I show a blank UIImage until the image is loaded when the user is scrolling fast?

Here's my code:

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

    CustomCell *Cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];

    if (Cell == nil) {
        Cell = [[CustomCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier];
    }

    // Configure the cell...
    int storyIndex = [indexPath indexAtPosition: [indexPath length] - 1];
    NSString *titeltext = [[stories objectAtIndex: storyIndex] objectForKey: @"title"];
    NSString *oudprijstext = [[stories objectAtIndex: storyIndex] objectForKey:@"prijsoud"];
    NSString *nieuwprijstext = [[stories objectAtIndex: storyIndex] objectForKey:@"prijsnieuw"];
    NSString *tijdtext = [[stories objectAtIndex: storyIndex] objectForKey:@"verloopt"];
    NSString *plaatjetext = [[stories objectAtIndex: storyIndex] objectForKey:@"thumb"];
    NSString *linktext = [[stories objectAtIndex: storyIndex] objectForKey:@"url"];
    NSString *buttontext = [[stories objectAtIndex: storyIndex] objectForKey:@"knop"];
    NSString *aanbiedertext = [[stories objectAtIndex: storyIndex] objectForKey:@"logo"];

    plaatjetext = [plaatjetext stringByReplacingOccurrencesOfString:@"<![CDATA[" withString:@""];
    plaatjetext = [plaatjetext stringByReplacingOccurrencesOfString:@"]]>" withString:@""];
    plaatjetext = [plaatjetext stringByReplacingOccurrencesOfString:@" " withString:@""];
    plaatjetext = [plaatjetext stringByTrimmingCharactersInSet:[NSCharacterSet whitespaceAndNewlineCharacterSet]];

    aanbiedertext = [aanbiedertext stringByReplacingOccurrencesOfString:@"<![CDATA[" withString:@""];
    aanbiedertext = [aanbiedertext stringByReplacingOccurrencesOfString:@"]]>" withString:@""];
    aanbiedertext = [aanbiedertext stringByReplacingOccurrencesOfString:@" " withString:@""];
    aanbiedertext = [aanbiedertext stringByTrimmingCharactersInSet:[NSCharacterSet whitespaceAndNewlineCharacterSet]];

    UIFont *titelfont = [UIFont fontWithName:@"TitilliumWeb-SemiBold" size:12];
    UIFont *oudfont = [UIFont fontWithName:@"TitilliumWeb-Light" size:12];
    UIFont *buttonfont = [UIFont fontWithName:@"TitilliumWeb-SemiBold" size:15];

    [Cell.titel setText:titeltext];
    Cell.titel.lineBreakMode = UILineBreakModeWordWrap;
    Cell.titel.numberOfLines = 2;
    Cell.titel.font = titelfont;
    [Cell.tijd setText:tijdtext];
    Cell.tijd.font = titelfont;
    [Cell.knop setText:buttontext];
    [Cell.knop setFont:buttonfont];
    [Cell.prijsnieuw setText:[NSString stringWithFormat:@"€ %@", nieuwprijstext]];
    Cell.prijsnieuw.font = titelfont;
    [Cell.prijsoud setText:[NSString stringWithFormat:@"€ %@", oudprijstext]];
    Cell.prijsoud.font = oudfont;

    UIImage *cachedImage = [self.imageCache objectForKey:plaatjetext];
    if (cachedImage)
    {
        Cell.plaatje.image = cachedImage;
    }
    else
    {
        // you'll want to initialize the image with some blank image as a placeholder

        //cell.imageView.image = [UIImage imageNamed:@"blankthumbnail.png"];

        // now download in the image in the background

        [self.imageDownloadingQueue addOperationWithBlock:^{

            NSURL *imageUrl   = [NSURL URLWithString:plaatjetext];
            NSData *imageData = [NSData dataWithContentsOfURL:imageUrl];
            UIImage *image    = nil;
            if (imageData)
                image = [UIImage imageWithData:imageData];

            if (image)
            {
                // add the image to your cache

                [self.imageCache setObject:image forKey:plaatjetext];

                // finally, update the user interface in the main queue

                [[NSOperationQueue mainQueue] addOperationWithBlock:^{
                    // make sure the cell is still visible

                    UITableViewCell *updateCell = [tableView cellForRowAtIndexPath:indexPath];
                    if (updateCell)
                        Cell.plaatje.image = image;
                }];
            }
        }];
    }

    UIImage *cachedImage2 = [self.imageCache2 objectForKey:aanbiedertext];
    if (cachedImage2)
    {
        Cell.aanbieder.image = cachedImage2;
    }
    else
    {
        // you'll want to initialize the image with some blank image as a placeholder

        //cell.imageView.image = [UIImage imageNamed:@"blankthumbnail.png"];

        // now download in the image in the background

        [self.imageDownloadingQueue2 addOperationWithBlock:^{

            NSURL *imageUrl2   = [NSURL URLWithString:aanbiedertext];
            NSData *imageData2 = [NSData dataWithContentsOfURL:imageUrl2];
            UIImage *image2    = nil;
            if (imageData2)
                image2 = [UIImage imageWithData:imageData2];

            if (image2)
            {
                // add the image to your cache

                [self.imageCache2 setObject:image2 forKey:aanbiedertext];

                // finally, update the user interface in the main queue

                [[NSOperationQueue mainQueue] addOperationWithBlock:^{
                    // make sure the cell is still visible

                    UITableViewCell *updateCell2 = [tableView cellForRowAtIndexPath:indexPath];
                    if (updateCell2)
                        Cell.aanbieder.image = image2;
                }];
            }
        }];
    }
    //Cell.plaatje.image = [UIImage imageWithData:[NSData dataWithContentsOfURL:[NSURL URLWithString:plaatjetext]]];
    //Cell.aanbieder.image = [UIImage imageWithData:[NSData dataWithContentsOfURL:[NSURL URLWithString:aanbiedertext]]];

    return Cell;
}

Please help me with instruction and/or sample code. Thanks in advance! :)

Rick

Answer 1

You commented out the code that was supposed to do that:

    // you'll want to initialize the image with some blank image as a placeholder

    //cell.imageView.image = [UIImage imageNamed:@"blankthumbnail.png"];

Enable it back and you should be good. In your custom cell I think you would need to apply this to Cell.plaatje.image and Cell.aanbieder.image.

Answer 2

You will want to implement prepareForReuse in your CustomCell class:

-(void)prepareForReuse
{
    [super prepareForReuse];
    self.plaatje.image = nil;
}