带有图像的 UITableView 在滚动时会暂时显示错误的图像答案

【问题标题】：UITableView with images display wrong image for a moment while scrolling带有图像的 UITableView 在滚动时会暂时显示错误的图像
【发布时间】：2017-09-18 13:19:43
【问题描述】：

我有一个UITableView，它有很多行，每一行只有一个图像。为了防止滞后，我使用了下面的代码。但是现在，当我滚动它时，它会暂时显示前几行的照片，然后自行纠正。如何解决这个问题？

- (void)loadImageNamed:(NSString *)name {
    dispatch_async(dispatch_get_global_queue( DISPATCH_QUEUE_PRIORITY_DEFAULT, 0), ^(void){
        // Determine path to image depending on scale of device's screen,
        // fallback to 1x if 2x is not available
        NSString *pathTo1xImage = [[NSBundle mainBundle] pathForResource:name ofType:@"jpg"];

        NSString *pathToImage = pathTo1xImage;

        UIImage *uiImage = nil;

        if (pathToImage) {
            // Load the image
            CGDataProviderRef imageDataProvider = CGDataProviderCreateWithFilename([pathToImage fileSystemRepresentation]);
            CGImageRef image = CGImageCreateWithJPEGDataProvider(imageDataProvider, NULL, NO, kCGRenderingIntentDefault);


            // Create a bitmap context from the image's specifications
            // (Note: We need to specify kCGImageAlphaPremultipliedFirst | kCGBitmapByteOrder32Little
            // because PNGs are optimized by Xcode this way.)
            CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
            CGContextRef bitmapContext = CGBitmapContextCreate(NULL, CGImageGetWidth(image), CGImageGetHeight(image), CGImageGetBitsPerComponent(image), CGImageGetWidth(image) * 4, colorSpace, kCGImageAlphaPremultipliedFirst | kCGBitmapByteOrder32Little);


            // Draw the image into the bitmap context
            CGContextDrawImage(bitmapContext, CGRectMake(0, 0, CGImageGetWidth(image), CGImageGetHeight(image)), image);

            //  Extract the decompressed image
            CGImageRef decompressedImage = CGBitmapContextCreateImage(bitmapContext);


            // Create a UIImage
            uiImage = [[UIImage alloc] initWithCGImage:decompressedImage];


            // Release everything
            CGImageRelease(decompressedImage);
            CGContextRelease(bitmapContext);
            CGColorSpaceRelease(colorSpace);
            CGImageRelease(image);
            CGDataProviderRelease(imageDataProvider);
        }


        // Configure the UI with pre-decompressed UIImage
        dispatch_async(dispatch_get_main_queue(), ^{
            self.categoryImageLabel.image = uiImage;
        });
    });
}

【问题讨论】：

你试过“准备重用”吗？

标签： ios objective-c uitableview nimbus

【解决方案1】：

其他答案告诉你该怎么做，但不告诉你为什么。

想象一个单元格，就像您必须在医生办公室候诊室填写的表格一样。想象一下，办公室重复使用这些表格，每个患者在填写信息之前都必须删除表格上的所有数据。

如果您没有任何过敏症，您可能会想跳过过敏症部分，因为它们不适用于您。但是，如果最后一个人过敏，并且您没有删除他们的答案，他们的答案仍会显示在表单上。

同样，当您将回收的单元格出列时，您必须清除所有字段，即使是那些不适用于您的字段。您应该将图像设置为 nil 或它们的起始占位符值。

请注意，如果您异步加载数据，您仍应首先将字段重置为其默认值，因为旧值会在异步加载完成之前显示。这就是你的情况。

您可以在cellForRowIndexPath 或prepareForReuse 中将图像设置为 nil/placeholder，但您需要在其中一个位置重置它，否则您将看到剩余图像，直到新图像完成加载。

【讨论】：

不错的答案！来自我的 +1
谢谢，这说明了一切。
简单的解释..我喜欢你表达的方式！ ++1 来自我 :)

【解决方案2】：

在您的自定义单元格中写下：

- (void)prepareForReuse {
   [super prepareForReuse];

   self.uiImage.image = nil;
}

【讨论】：

虽然这段代码 sn-p 可以解决问题，但它没有解释为什么或如何回答这个问题。请包括对您的代码的解释，因为这确实有助于提高您的帖子的质量。请记住，您是在为将来的读者回答问题，而这些人可能不知道您提出代码建议的原因

【解决方案3】：

tableview 正在重用您的旧图像，这意味着如果 imageview 有图像，当视图回收它时它将是相同的，因此如果您需要将其设为 nil 或用占位符图像替换它有一个。

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
  let cell = CustomUITableViewCell
  cell.imageview.image = nil
  // load your image
}

或者在您的自定义单元格调用准备重用时，每次单元格被表格重用时都会调用：

 override func prepareForReuse() {
   super.prepareForReuse()
   imageView.image = nil // or place holder image
 }

【讨论】：

【解决方案4】：

即使接受的答案有效，但这不是推荐的方式。

根据Apple's documentation，您应该只重置单元格的与内容无关的属性，例如，alpha、编辑和选择状态。

因此，处理此问题的最佳方法是在cell(for row:atIndexPath:) 中设置默认图像，这样它就可以处理您拥有图像的两种情况，如果图像不可用，则使用默认图像，什么这将是当你快速滚动时。它还没有加载图像，并且在单元格的重用行为中它将选择默认图像。

【讨论】：