Question

我有一个提供产品信息的应用。信息（包括图像）来自互联网。

它工作正常，但是当我快速滚动时，我会看到错误的图片，直到加载正确的图片。在用户快速滚动图像加载之前，如何显示空白UIImage？

这是我的代码：

- (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;
}

请帮我提供说明和/或示例代码。提前致谢！：）

瑞克

Answer 1

您注释掉了应该执行此操作的代码：

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

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

启用它，你应该很好。在您的自定义单元格中，我认为您需要将其应用于Cell.plaatje.image和Cell.aanbieder.image。

Answer 2

您需要在prepareForReuse课程中实施CustomCell：

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

通过快速滚动UITableView错误的图像

2 个答案: