UITableView 中的图像在滚动时不断重新加载并且错误的图像闪烁

Question

我创建了一个 UITableView，它根据 URL 请求填充每个单元格。我使用“dispatch_queue”来防止 UItableView 冻结。出于某种原因，当我滚动浏览 UITableView 时，图像会闪烁并消失并填充错误的单元格一秒钟，直到自行修复。这是我的代码。我正在使用 restkit 提取提要

customCell.customCellTextLabel.text = [NSString stringWithFormat:@"%@",feedO.title];

    NSString *string = [NSString stringWithFormat:@"%@",feedO.body];

    NSURL *urlString;

        NSDataDetector *linkDetector = [NSDataDetector dataDetectorWithTypes:NSTextCheckingTypeLink error:nil];
        NSArray *matches = [linkDetector matchesInString:string options:0 range:NSMakeRange(0, [string length])];
        for (NSTextCheckingResult *match in matches) {
            if ([match resultType] == NSTextCheckingTypeLink) {
                urlString = [match URL];
                NSLog(@"found Body URL: %@ and title %@", urlString,feedO.title);
            }
        }

        dispatch_queue_t imageQueue = dispatch_queue_create("imageDownloader",nil);
        dispatch_async(imageQueue, ^{

            NSData *data = [[NSData alloc] initWithContentsOfURL:urlString];

            dispatch_async(dispatch_get_main_queue(), ^{

                customCell.customCellImageView.image = [UIImage imageWithData: data];
            });
        });


    return customCell;

Answer 1

您应该考虑使用这个库 SDWebImage，可在此处https://github.com/rs/SDWebImage 找到此类问题。它非常容易处理远程图像的异步下载和缓存。

使用 CocoaPods 完成最简单的安装

CocoaPods (http://cocoapods.org) 是 Objective-C 的依赖管理器，它可以自动化并简化在项目中使用第三方库的过程。 有关详细信息，请参阅“入门”部分。

在你的 Podfile 中使用

platform :ios, '6.1'
pod 'SDWebImage', '~>3.6'

安装 SDWebImage 的依赖项后，只需在视图控制器中使用以下行：

#import <SDWebImage/UIImageView+WebCache.h>

...

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

    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:MyIdentifier];

    if (cell == nil)
    {
        cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault
                                       reuseIdentifier:MyIdentifier] autorelease];
    }

    // Here we use the new provided setImageWithURL: method to load the web image
    [cell.imageView setImageWithURL:[NSURL URLWithString:@"http://www.domain.com/path/to/image.jpg"]
                   placeholderImage:[UIImage imageNamed:@"placeholder.png"]];

    cell.textLabel.text = @"My Text";
    return cell;
}

Answer 2

你的代码少了一行，这是我添加的。

customCell.customCellImageView.image =nil;

customCell.customCellTextLabel.text = [NSString stringWithFormat:@"%@",feedO.title];

NSString *string = [NSString stringWithFormat:@"%@",feedO.body];

NSURL *urlString;
customCell.customCellImageView.image =nil;

    NSDataDetector *linkDetector = [NSDataDetector dataDetectorWithTypes:NSTextCheckingTypeLink error:nil];
    NSArray *matches = [linkDetector matchesInString:string options:0 range:NSMakeRange(0, [string length])];
    for (NSTextCheckingResult *match in matches) {
        if ([match resultType] == NSTextCheckingTypeLink) {
            urlString = [match URL];
            NSLog(@"found Body URL: %@ and title %@", urlString,feedO.title);
        }
    }

    dispatch_queue_t imageQueue = dispatch_queue_create("imageDownloader",nil);
    dispatch_async(imageQueue, ^{

        NSData *data = [[NSData alloc] initWithContentsOfURL:urlString];

        dispatch_async(dispatch_get_main_queue(), ^{

            customCell.customCellImageView.image = [UIImage imageWithData: data];
        });
    });


return customCell;

Answer 3

原因是UITableView 正在重用创建的单元格。 因此，首先它会创建您的 CustomCell 类中的 10 个。

单元格 0
单元 1
...
细胞 9

通过创建这 10 个单元格，它将启动 10 个异步调用来获取图像。

块 0 -> 单元 0
块 1 -> 单元 1
...
块 9 -> 单元 9

如果您在所有 10 次下载完成之前不滚动，这将正常工作。

但只要您开始滚动，UITableView 就会开始重复使用创建的单元格并开始新的下载。

所以首先它可能会重用 Cell 0 并创建块 10 -> Cell 0。

如果在选择单元 0 以供重复使用时块 0 尚未完成，您现在将有两个块想要将它们的图像放到同一个单元上。 导致以下两种情况：

1. 块 0 先完成，然后块 10
2. 第 10 块首先完成，然后是第 0 块

这就是导致“闪烁”的原因。

然后想象一下在几秒钟内滚动浏览 1000 个单元格 :)

解决方案

您需要能够取消排队的块，以便您的单元格被重复使用。

我会使用例如SDWebImage 或 FastImageCache。

Answer 4

你说的。您在另一个线程中捕获图像，以防止冻结。并且在 tableView 中，单元格被重用，并且在一个后台线程中您正在捕捉新照片，而在主线程中，带有前一张照片的单元格被返回。 在代码中，我对其进行了修复并提供了更好的解释：

customCell.customCellTextLabel.text = [NSString stringWithFormat:@"%@",feedO.title];

NSString *string = [NSString stringWithFormat:@"%@",feedO.body];

NSURL *urlString;

    NSDataDetector *linkDetector = [NSDataDetector dataDetectorWithTypes:NSTextCheckingTypeLink error:nil];
    NSArray *matches = [linkDetector matchesInString:string options:0 range:NSMakeRange(0, [string length])];
    for (NSTextCheckingResult *match in matches) {
        if ([match resultType] == NSTextCheckingTypeLink) {
            urlString = [match URL];
            NSLog(@"found Body URL: %@ and title %@", urlString,feedO.title);
        }
    }
   // Here you need, at least quit the previous imagen, is better if you implement
   //   and activity indicator (here start), and also you should implement some imagen cache.
   customCell.customCellImageView.image = nil;


   // Apart from here, go to another thread.

    dispatch_queue_t imageQueue = dispatch_queue_create("imageDownloader",nil);
    dispatch_async(imageQueue, ^{

        // this operation is slowly that return a cell, this happens after [1]
        NSData *data = [[NSData alloc] initWithContentsOfURL:urlString];

        dispatch_async(dispatch_get_main_queue(), ^{

        //If you implement and activity indicator stop here.
            customCell.customCellImageView.image = [UIImage imageWithData: data];
        });
    });

// [1] the cell is returned before the image is ready.
return customCell;

Answer 5

以上答案是正确的。但无需在单元格中下载图像。您可以在适合您要求的 viewWillAppear 或 ViewDidLoad 中进行表格加载之前下载图像。

Answer 6

当您每次滚动表格时，您的图像都会再次下载。为了防止这种情况，我更喜欢你从缓存中获取图像并直接在你的 imageview 中设置。所以根据你的代码。如果您从 0 索引滚动到 10，则单元格将下载所有 10 个单元格的图像。之后，如果您再次滚动 10 到索引 0 。然后将重新下载图像。

您可以使用 (https://github.com/rs/SDWebImage) 异步下载图像。它非常简单快捷。

我更喜欢这个库，因为它会处理你的缓存。写在下面的代码

#import "UIImageView+WebCache.h"

// in cellForRowAtIndexPath.
[customCell.customCellImageView sd_setImageWithURL: [NSURL URLWithString:urlString]];

删除下面的代码。

dispatch_queue_t imageQueue = dispatch_queue_create("imageDownloader",nil);
    dispatch_async(imageQueue, ^{

        NSData *data = [[NSData alloc] initWithContentsOfURL:urlString];

        dispatch_async(dispatch_get_main_queue(), ^{

            customCell.customCellImageView.image = [UIImage imageWithData: data];
        });
    });

也许这会对你有所帮助。