延迟后如何在 tableView 中加载图像？

Question

我见过一个叫 ZuluTrade 的应用，它的 tableView 单元格中有一个图表。

基本上好像是tableViewCell的imageView中的图片。

当页面加载时，tableView 首先显示文本，然后在我们滚动 tableView 时将图像加载到 tableViewCell 中。

这有助于提高性能，因为用户不必等到所有内容都加载到单元格中，并且它使 tableView 滚动平滑。

如何实现该功能？

以下是应用截图：

我的tableView中的代码cellForRowAtIndexPath:

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {

NSString *MyIdentifier = [NSString stringWithFormat:@"MyIdentifier %i", indexPath.row];

MyTableCell *cell = (MyTableCell *)[tableView dequeueReusableCellWithIdentifier:MyIdentifier];
//if (cell == nil) {
    cell = [[[MyTableCell alloc] initWithFrame:CGRectZero reuseIdentifier:MyIdentifier] autorelease];


    NSString *testVal = [[NSUserDefaults alloc] valueForKey:@"idValue"];

    if (testVal == (NSString *)[NSNull null]) {
        testVal = @"NULL";
    }
    //NSLog(@"testVal : %@",testVal);
NSLog(@"Fund Name : %@",[[array1 objectAtIndex:indexPath.row] valueForKey:@"FundName"]);

    NSDate *date = [NSDate date];
NSDateFormatter *dtFormat = [[NSDateFormatter alloc] init];
[dtFormat setDateFormat:@"yyyy-MM-dd"];
NSString *dtString = [dtFormat stringFromDate:date];

  NSString *fundname = [NSString stringWithFormat:@"%@",[[array1 objectAtIndex:indexPath.row] valueForKey:@"FundName"]];


NSString *imageName =[NSString stringWithFormat:@"%@_%@.png",fundname,dtString]; 
//NSFileManager *fileManager = [NSFileManager defaultManager];
NSString *documentsDirectory = [self getImagePath];
NSLog(@"Image Path : %@",documentsDirectory);
NSError *error1;
NSString *filepath1;
NSArray *files = [[NSFileManager defaultManager] contentsOfDirectoryAtPath:documentsDirectory error:&error1];
if (files == nil) {
    NSLog(@"Error reading contents of documents directory: %@", [error1 localizedDescription]);
}
NSLog(@"FileName: %@",imageName);
BOOL success = NO;
for (NSString *file in files)
{
    NSLog(@"file in Files is %@",file);
    if([file isEqualToString:[NSString stringWithFormat:@"%@",imageName]])
    {
        filepath1 = [documentsDirectory stringByAppendingPathComponent:file];
        NSLog(@"Full Path :%@",filepath1);
        success = YES;
    }
}




    if(success == YES)
    {
        cell.imageView.image = [UIImage imageWithContentsOfFile:filepath1];
    }
    else if(success != YES)
    {
        cell.imageView.image = [UIImage imageNamed:@"newfund.png"];
    }


    UILabel *label = [[[UILabel alloc] initWithFrame:CGRectMake(60.0, 0, 120.0, 
                                                                tableView.rowHeight)] autorelease]; 
    [cell addColumn:50];
    label.textColor = [UIColor blackColor];
    label.tag = LABEL_TAG; 
    label.font = [UIFont systemFontOfSize:12.0]; 
    //NSLog(@"%@",[[array1 objectAtIndex:indexPath.row] valueForKey:@"FundName"]);
    label.text = [NSString stringWithFormat:@"%@",[[array1 objectAtIndex:indexPath.row] valueForKey:@"FundName"]];
    //NSLog(@"FundName: %@",label.text);
    label.textAlignment = UITextAlignmentCenter; 
    //label.textColor = [UIColor blueColor]; 
    label.autoresizingMask = UIViewAutoresizingFlexibleRightMargin | 
    UIViewAutoresizingFlexibleHeight; 
    [cell.contentView addSubview:label];        

return cell;
}

Answer 1

您可以从文档目录添加图像，然后将它们作为惰性表格图像添加到表格视图中。

为此，您可以使用以下内容

查看下面的 SDWebImage 存储库链接。

https://github.com/rs/SDWebImage#readme

这会对你有所帮助。

现在你需要做一个小改动：

[cell.imageView setImageWithURL:[NSURL fileURLWithPath:test1.png]
           placeholderImage:[UIImage imageNamed:@"placeholder.png"]];

代替

[cell.imageView setImageWithURL:[NSURL URLWithString:test1.png]
           placeholderImage:[UIImage imageNamed:@"placeholder.png"]];

乐于助人:-)

Answer 2

当您在tableView:cellForRowAtIndexPath: 中配置单元格时，您应该检查是否已加载图像（如果已加载 - 从那里显示）。

当图像被加载（全部或部分）时，您应该调用表格视图的reloadData / reloadRowsAtIndexPaths:withRowAnimation: / reloadSections:withRowAnimation:) 从缓存中删除旧生成的表格单元格。

更新：

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

    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
    if (cell == nil) {
        cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier] autorelease];

        UIImageView *imgView = [[[UIImageView alloc] init] autorelease];
        imgView.hidden = YES;
        imgView.tag = 5555;
        [cell addSubview:imgView];
    }

    if (nil != _images[indexPath.row]) {
        UIImageView *imgView = (UIImageView *)[cell viewWithTag:5555];
        imgView.image = _images[indexPath.row];
        [imgView sizeToFit];
        imgView.hidden = NO;
    }

    return cell;
}

这里的 _images[] 是带有单元格图像的容器（UIImage 指针）。我想我们只有一个部分让我自己在这个例子中使用一些简单的容器。如果未加载图像，则 _images[] 存储 nil，否则 - 必要的 UIImage*。

在加载图像时调用的某些方法中，您应该执行以下步骤：

1. 为对应的_images[]索引保存图片。

2. 调用 tableView 的 reloadRowsAtIndexPaths:withRowAnimation: 以获取必要的部分和行（当然来自主线程）。

Answer 3

一种方法可能是，当您加载一个单元格时，您可以启动一个新线程来加载图像。

[NSThread detachNewThreadSelector:@selector(loadData:) toTarget:self withObject:nil];

然后在同一个类中你需要方法来做工作和回调。

-(void) loadData:(id)object
{
    NSAutoreleasePool * pool = [[NSAutoreleasePool alloc] init];
    //do stuff here
    [pool release];
    //Call back
    [self performSelectorOnMainThread:@selector(loadDataComplete:) withObject:nil waitUntilDone:NO];
}


-(void) loadDataComplete:(id)object
{
    // Maybe be more clever and pass the indexPath around so you can just load that row.
    [tableView reloadData]; 
}

Answer 4

当单元格第一次可见时，调用tablView:cellForRowAtIndexPath: 方法来显示文本。将单元格标记为可见。使用异步线程（子类 NSOperation）加载图像。当图像准备好用于特定单元格时，将–reloadRowsAtIndexPaths:withRowAnimation: 发送到表视图以从并发线程加载该特定行。我不会使用reloadData，因为这会导致表中的所有数据都被重新加载，并且可能会影响滚动性能。

Answer 5

查看LazyTableImages sample code by Apple

此示例演示了一种多阶段加载和 显示一个 UITableView。它首先从加载相关文本 一个 RSS 提要，以便表格可以尽快加载，然后 异步下载每一行的图像，因此 UI 更丰富 反应灵敏。