ios - 在单元格中异步加载图像的 UITableView - 图像在慢速连接时不断变化

Question

我正在 TableView 中异步加载图像。在慢速连接上，单元格中的图像不断闪烁/变化(我认为这是由于重复使用单元格所致)。我遵循了有关其他一些相关问题的建议，包括:

• 缓存图像
• 设置占位符图像

在正常连接下工作正常，但在 EDGE 和慢速网络上，问题仍然出现。我想知道是否是全局队列正在通过网络请求进行备份？如果是这样，我该如何解决这个问题？

这是我的代码:

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    // get the data for this photo post
    NSDictionary *data = [self.streamPhotosData objectAtIndex:indexPath.row];

    static NSString *CellIdentifier = @"StreamPhotoTableViewCell";
    __block StreamPhotoTableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"StreamPhotoTableViewCell"];

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

    cell.delegate = self;

    // check if image in cache, else cache it
    if ([[[GlobalCaches getCurrentInstance] photoCache] objectForKey:[data objectForKey:@"photoGuid"]] != nil) {
        // cache hit
        cell.photoImageView.image = [[[GlobalCaches getCurrentInstance] photoCache] objectForKey:[data objectForKey:@"photoGuid"]];
    } else {
        // set a placeholder image
        cell.photoImageView.image = [UIImage imageNamed:@"placeholder.png"];

        // download the image asynchronously
        dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0), ^(void) {
            UIImage *downloadedImage = [UIImage imageWithData:[NSData dataWithContentsOfURL:[NSURL URLWithString:[data objectForKey:@"url"]]]];

            if (downloadedImage) {
                dispatch_async(dispatch_get_main_queue(), ^{
                    cell.photoImageView.image = downloadedImage;

                    // update cache
                    [[[GlobalCaches getCurrentInstance] photoCache] setObject:downloadedImage forKey:[data objectForKey:@"photoGuid"]];
                });
            }
        });

    }

    return cell;
}

Answer 1

我曾经遇到过类似的问题。

为什么会这样？假设您在第 1 行的 cellForRow 中，该图像不在缓存中，因此您正在下载它。同时，您滚动 tableView，假设您现在位于 cellForRow 中的第 8 行，这是同一个单元格实例。假设现在缓存中有此图像，所以您只需设置没有时间偏移的图像，并且在单元格包含正确的图像后，第 1 行的图像已准备就绪，请记住它是相同的单元格实例，因此图像将被替换。当然这只是一个例子。

你可以尝试'记住'你从哪一行开始下载图片，在开始下载之前设置一个'beforeTag'，然后是，检查它是否是相同的indexPath。行

    NSInteger beforeTag = indexPath.row;

    // download the image asynchronously
    dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0), ^(void) {
        UIImage *downloadedImage = [UIImage imageWithData:[NSData dataWithContentsOfURL:[NSURL URLWithString:[data objectForKey:@"url"]]]];

        if (downloadedImage) {
            dispatch_async(dispatch_get_main_queue(), ^{

                if (indexPath.row == beforeTag) {
                    cell.photoImageView.image = downloadedImage;
                }

                // update cache
                [[[GlobalCaches getCurrentInstance] photoCache] setObject:downloadedImage forKey:[data objectForKey:@"photoGuid"]];
            });
        }
    });

此外，我会将这一行放在自定义单元格的 prepareForReuse 中:

cell.photoImageView.image = [UIImage imageNamed:@"placeholder.png"];

每次重用 UITableViewCell 时都会调用此方法，如果单元格已经存在，它会在您“dequeueReusableCellWithIdentifier”之后调用。并且总是放一个占位符图像是可以的，如果图像在缓存中，你不会注意到这个占位符。

希望对你有帮助