UITableView异步加载图片时的显示异常问题求助

看起来你遇到的两个问题都是异步加载结合cell复用导致的典型场景，我来一步步帮你分析和解决：

问题原因拆解 #

1. 图片持续刷新并显示不同图片的问题 #

你的ImageLoader在缓存不存在时，会先返回占位图，等真实图片下载完成后又会回调一次真实图。而每次回调你都调用了tableView.reloadRows(at: [indexPath], with: .none)，这会触发cellForRowAt再次执行，再次调用obtainImageWithPath——因为占位图并没有存入缓存，第二次调用又会重复"返回占位图→下载真实图→回调"的流程，形成循环，导致cell持续刷新、交替显示占位图和真实图。

2. 图片加载到错误行的问题 #

这是UITableView cell复用的经典坑：当你滚动列表时，原来indexPath对应的cell已经被复用给其他行，但异步回调还是拿着旧的indexPath去设置图片，导致图片"跑"到了错误的cell上。

解决方案 #

我们需要从ImageLoader逻辑优化和cell复用匹配两个维度修改代码：

第一步：优化ImageLoader的回调逻辑 #

让ImageLoader只在有有效图片时回调，同时完善错误处理，避免重复触发无效回调：

class ImageLoader {
    let imageCache = NSCache<NSString, UIImage>()
    
    init() {}
    
    func obtainImageWithPath(imagePath: URL, completionHandler: @escaping (UIImage?) -> ()) {
        // 优先读取缓存
        if let cachedImage = imageCache.object(forKey: imagePath.absoluteString as NSString) {
            DispatchQueue.main.async {
                completionHandler(cachedImage)
            }
            return
        }
        
        // 先返回占位图（如果需要的话）
        let placeholder = UIImage(named: "placeholderImage")
        DispatchQueue.main.async {
            completionHandler(placeholder)
        }
        
        // 下载真实图片
        URLSession.shared.dataTask(with: imagePath) { [weak self] data, response, error in
            guard let data = data, error == nil, let image = UIImage(data: data) else {
                DispatchQueue.main.async {
                    completionHandler(nil) // 下载失败返回nil
                }
                return
            }
            
            // 存入缓存
            self?.imageCache.setObject(image, forKey: imagePath.absoluteString as NSString)
            
            DispatchQueue.main.async {
                completionHandler(image)
            }
        }.resume()
    }
}

第二步：修改cellForRowAt，解决cell复用错位问题 #

推荐使用自定义Cell来记录当前cell对应的图片URL，在回调时做匹配检查，避免错位：

第一步：创建自定义Cell

class ArticleCell: UITableViewCell {
    var targetImageURL: URL? // 记录当前cell应该显示的图片URL
    
    override func prepareForReuse() {
        super.prepareForReuse()
        // 复用前清空所有内容，避免残留
        imageView?.image = nil
        targetImageURL = nil
        textLabel?.text = nil
        detailTextLabel?.text = nil
    }
}

第二步：修改cellForRowAt逻辑

override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCell(withIdentifier: "ArticleCell", for: indexPath) as! ArticleCell
    let article = newsArticles!.articles[indexPath.row]
    
    cell.textLabel?.text = article.title
    cell.detailTextLabel?.text = article.content
    cell.targetImageURL = article.urlToImage
    cell.imageView?.image = UIImage(named: "placeholderImage") // 先显示占位图
    
    guard let url = article.urlToImage else {
        return cell
    }
    
    imageLoader.obtainImageWithPath(imagePath: url) { [weak cell] image in
        // 检查cell是否存活，且当前cell的目标URL和请求URL一致
        guard let cell = cell, cell.targetImageURL == url, let validImage = image else {
            return
        }
        cell.imageView?.image = validImage
        // 移除reloadRows调用，直接更新imageView即可，避免循环刷新
    }
    
    return cell
}

如果暂时不想自定义Cell，也可以用临时方案：在回调时重新校验当前indexPath对应的文章URL是否匹配：

override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCell(withIdentifier: "ArticleCell", for: indexPath)
    let article = newsArticles!.articles[indexPath.row]
    
    cell.textLabel?.text = article.title
    cell.detailTextLabel?.text = article.content
    cell.imageView?.image = UIImage(named: "placeholderImage")
    
    guard let url = article.urlToImage else {
        cell.imageView?.image = nil
        return cell
    }
    
    imageLoader.obtainImageWithPath(imagePath: url) { [weak self] image in
        guard let self = self, 
              indexPath.row < self.newsArticles?.articles.count ?? 0,
              self.newsArticles?.articles[indexPath.row].urlToImage == url,
              let updateCell = tableView.cellForRow(at: indexPath), 
              let validImage = image else {
            return
        }
        updateCell.imageView?.image = validImage
    }
    
    return cell
}

关键改进点总结 #

• 移除tableView.reloadRows调用，彻底避免循环刷新；
• 通过记录cell的目标图片URL，在异步回调时做匹配校验，解决cell复用导致的图片错位；
• 优化ImageLoader的缓存和错误处理逻辑，减少无效回调。

内容的提问来源于stack exchange，提问作者Dirk