iOS 7 在 iPad 上的一个单元格中加载三个图像是滞后的，滚动卡住

Question

我正在处理的 iPad 应用程序有很大问题。我会向您解释什么是问题。

我有产品 list 。我有表格 View 来显示该产品。我尝试在横向模式下在一个单元格中加载 3 张图像(产品)，在纵向模式下加载 2 张图像(产品)。为此，我在我的 Controller 类中使用了这段代码

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
  UITableViewCell *cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:@"cell"];
  [cell setBackgroundColor:[UIColor clearColor]];

  dispatch_queue_t queue = dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_BACKGROUND,  0ul);
  dispatch_async(queue, ^{

    for(int i = 0; i < self.cols; i++){
      int index = (indexPath.row * self.cols) + i;

      if([self.productList count] > 0 && index < [self.productList count]){
        Product *tmpProduct = nil;
        if([self.productList isKindOfClass:[NSMutableSet class]]){
          tmpProduct = (Product *)[[NSArray arrayWithArray:[((NSSet *)self.productList) allObjects]]  objectAtIndex:index];
        }else{
          tmpProduct = (Product *)[((NSArray *)self.productList) objectAtIndex:index];
        }

        int x = i * self.itemWidth + (50 * (i + 1));
        int y = 0;
        int imageWidth = self.itemWidth;
        int imageHeight = self.itemHeight - 45;

        UIView *awesomeView = [[UIView alloc] initWithFrame:CGRectMake(x, y, imageWidth, self.itemHeight)];
        awesomeView.backgroundColor = [UIColor clearColor];
        awesomeView.userInteractionEnabled = YES;
        awesomeView.tag = 700;

        UIImage *image;
        if([tmpProduct getImageFilePath]){
          image = [UIImage imageWithContentsOfFile:[tmpProduct getImageFilePath]];
        }else{
          image = [UIImage imageNamed:@"no-image.png"];
        }
        dispatch_sync(dispatch_get_main_queue(), ^{

          UIImageView *productImage = [[UIImageView alloc] initWithImage: image];
          CGRect frameRect = productImage.frame;
          frameRect.size.width = imageWidth;
          frameRect.size.height = imageHeight;
          productImage.frame = frameRect;
          productImage.contentMode = UIViewContentModeScaleAspectFill;
          productImage.tag = index;
          productImage.backgroundColor = [UIColor grayColor];
          productImage.contentMode = UIViewContentModeScaleAspectFit;

          [awesomeView addSubview:productImage];
          [cell.contentView addSubview:awesomeView];
          [cell setNeedsLayout];
        });

      }
    }
  });
  return cell;
}

您可以看到，当单元格想要显示并且调用“cellForRowAtIndexPath”方法时，我启动了后台队列。对于一个单元格中的 3 或 2 个图像，以“for”开头。根据行获取该单元格的产品。计算图像的宽度和高度以及位置。启动一个助手 View 。比加载图像。如果图像存在于产品对象中，我加载产品图像，否则我加载默认图像(无图像)。将该 ImageView 放在我的辅助 View 中。之后，我将我的助手 View 加载到主队列中的单元格。 (我使用那个辅助 View “awesomeView”，因为我有更多的东西要显示，一些标签，我删除了它以简化这个问题)。

这是我录制的 youtube 视频，以查看我遇到的问题。你可以看到，当我向上或向下滚动时，它非常延迟。每次脚本加载下一个单元格时，它都会卡住几秒钟。 YOUTUBE 视频:http://youtu.be/hE3KI0SVrPk

谁能帮帮我，我不知道我哪里错了。

我尝试了几个队列组合，也尝试了不使用队列，结果几乎相同。

提前致谢。

Answer 1

正确的做法如下:

• 创建一些可变集合来保存图像

• 当你发现你需要一张图片，但它不在收藏中时，(有点)像你正在做的那样做 - 在后台获取图片

• 为您当前正在获取的内容保留一个索引或一些 ID，这样您就不会重复获取它。

• 当您获取图像时，然后 dispatch_async 到 View Controller 中的方法

• 接收方法接收图像，并检查表中的所有可见单元格(有一个方法)，以查看图像是否适用于其中任何单元格。如果是这样，它会更新该单元格。如果不是，它会将图像放入可变集合中。

在我的例子中，我有一个已知的 productID，我可以将其用作与可变字典一起使用的键。我会在第一次获取图像时为键的对象添加一个 [NSNull null] 条目 - 这使得测试我是否已经在获取图像变得容易。一旦我得到图像，图像就替换了 nsnull 占位符。