翠鸟图像渲染回收单元

Question

我正在使用 Kingfisher 下载和缓存我的图像。我正在使用 CustomImageView 下扩展 ImageView 的自定义类。我还使用自定义 UITableViewCell 在 CustomCell 类文件的 didSet 属性中调用 loadImage 方法。

下面的方法 loadImage 是所有魔法发生的地方。

class CustomImageView : UIImageView {
var lastUrlLoaded: String?

func loadImage(url:String) {
    lastUrlLoaded = url
    ImageCache.default.retrieveImage(forKey: url, options: nil) { (image, cacheType) in
        if let image = image {
            self.image = image
            return
        }
        else {
            guard let url = URL(string: url) else { return }
            self.kf.setImage(with: url, placeholder: nil, options: nil, progressBlock: nil) {
                (image, error, cacheTye, _) in
                if let err = error {
                    self.kf.indicatorType = .none
                    DispatchQueue.main.async {
                      self.image = #imageLiteral(resourceName: "no_image_available") 
                    }
                    print ("Error loading Image:", err)
                    return
                }

                if url.absoluteString != self.lastUrlLoaded { return }
                if let image = image {
                    ImageCache.default.store(image, forKey: url.absoluteString)
                    DispatchQueue.main.async {
                        self.image = image
                    }
                }
            }
        }
    }
}

// Custom TableViewCell -- NewsCell.file
 class NewsCell: UITableViewCell {
var article: Article? {
    didSet{
        guard let image_url = article?.image_url else { return }
        _image.kf.indicatorType = .activity
        _image.loadImage(url: image_url, type: "news")
      }
   }
}

 // METHOD in my NewsController
 override func tableView(_ tableView: UITableView, cellForRowAt indexPath: 
  IndexPath) -> UITableViewCell {        
   let cell = tableView.dequeueReusableCell(withIdentifier: cellId, for: indexPath) as! NewsCell
      cell.article = articles[indexPath.item]
return cell
}

我在快速滚动单元格时遇到问题，一些已加载的图像被用于错误的单元格。我已经研究并阅读了其他帖子，但没有答案对我有帮助。我了解它正在处理后台任务，但不确定如何解决它。如果有人可以帮助或指出我正确的方向，将不胜感激。

我在 stackoverflow 上看到并尝试过的解决方案：

1. prepareForReuse 在自定义单元格中将图像设置为 nil。
2. 在 cellforrowatindexpath 处将图像设置为零。

Answer 1

问题

当您快速滚动时，您正在重复使用单元格。重复使用的单元格包含 KF 图像，这些图像可能具有正在运行的下载任务（从对 kf.setImage 的调用开始），用于回收文章中的图像。如果允许该任务完成，它将使用旧图像更新您的新单元格。我会建议两种方法来解决它。

答案 1 - 杀死回收的下载任务

请参阅 Kingfisher 备忘单Canceling a downloading task。

备忘单显示了如何在表格视图的 didEndDisplaying 中停止这些任务。我在这里引用它：

// In table view delegate
func tableView(_ tableView: UITableView, didEndDisplaying cell: 
UITableViewCell, forRowAt indexPath: IndexPath) {
    //...
    cell.imageView.kf.cancelDownloadTask()
}

您可以在那里或在您的单元类的 didSet 观察器中执行此操作。你明白了。

答案 2 - 不要杀死他们，只是忽略结果

另一种方法是允许下载任务完成，但仅在下载的 URL 与当前所需的 URL 匹配时更新单元格图像。也许你正试图用你的 lastUrlLoaded 实例变量做类似的事情。

你在 kf.setImage 的完成处理程序中有这个：

if url.absoluteString != self.lastUrlLoaded { return }

这就是我的意思，只是您没有正确设置该变量以使其工作。为了解释起见，我们假设它被称为“desiredURL”。然后你可以在 didSet 观察者中设置它：

_image.desiredURL = image_url

并在kf.setImage的completion handler中测试：

// phew, finished downloading, is this still the image that I want?
if url != self.desiredURL { return }

注意事项

如果是我，我肯定会采用第二种方法（它具有缓存下载图像的积极副作用，但我也不相信取消任务）。

此外，您似乎正在尝试做 kf.setImage 为您做的艰难的事情，即加载缓存等。我相信您有您的理由，无论哪种方式您仍然需要处理这个问题。

Answer 2

override func prepareForReuse() {
    super.prepareForReuse()
    imageView.kf.cancelDownloadTask() // first, cancel currenct download task
    imageView.kf.setImage(with: URL(string: "")) // second, prevent kingfisher from setting previous image
    imageView.image = nil
}

Answer 3

在您的模型中检查 url 是否不存在将其设置为 nil，然后在单元格中检查您的 url 是否存在设置它的图像，否则为其设置一个占位符。

if article?.image_url != nil{
  _image.kf.indicatorType = .activity
  _image.loadImage(url: image_url, type: "news")
}else{
  _image = UIImage(named: "placeholder")
}