如何正确实现UITableViewCell的prepareForReuse()解决图片跳转问题

你的问题核心出在两点：一是代码逻辑顺序错误，二是没处理异步图片加载的残留任务。

先修正你代码里的明显错误 #

你在cellForRowAt里先调用cell.setup(cat)设置图片，紧接着又把catImageView.image设为nil，这等于把刚设置的内容清空了，完全搞反了顺序。正确的做法是先重置状态，再设置数据，或者让setup方法内部处理重置。

根本解决：处理异步加载的残留任务 #

图片跳转大多是因为异步加载请求没被取消——当cell被复用时，之前的图片加载请求还在进行，等请求完成后就会把旧图片塞到新复用的cell里，导致“跳转”。

1. 正确实现prepareForReuse

在cell的prepareForReuse方法里，不仅要清空图片，还要取消当前正在进行的图片加载任务：

override func prepareForReuse() {
    super.prepareForReuse()
    // 清空当前图片
    catImageView.image = nil
    // 取消图片加载任务（根据你用的加载方式调整）
    // 如果是自定义URLSession任务：
    imageDownloadTask?.cancel()
    imageDownloadTask = nil
    // 如果用RxSwift：替换新的disposeBag，销毁旧订阅
    disposeBag = DisposeBag()
}

2. 修正cellForRowAt逻辑

不用在cellForRowAt里手动清图片，交给prepareForReuse处理，直接调用setup即可：

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    guard let cell = tableView.dequeueReusableCell(withIdentifier: SearchCell.identifier, for: indexPath) as? SearchCell else { return UITableViewCell() }
    let cat = cats[indexPath.row]
    cell.setup(cat)
    return cell
}

3. RxSwift场景的处理

每个cell必须持有独立的disposeBag，在prepareForReuse时替换成新的，这样旧的图片加载订阅会自动销毁，不会再更新复用后的cell：

class SearchCell: UITableViewCell {
    // 每个cell自己的disposeBag
    var disposeBag = DisposeBag()
    @IBOutlet weak var catImageView: UIImageView!
    
    func setup(_ cat: Cat) {
        // 加载图片的Rx订阅绑定到当前cell的disposeBag
        APIManager.loadImage(from: cat.imageURL)
            .observe(on: MainScheduler.instance)
            .subscribe(onNext: { [weak self] image in
                self?.catImageView.image = image
            })
            .disposed(by: disposeBag)
    }
    
    override func prepareForReuse() {
        super.prepareForReuse()
        catImageView.image = nil
        // 替换新的disposeBag，旧订阅自动释放
        disposeBag = DisposeBag()
    }
}

4. 用第三方图片库更省心

如果用Kingfisher、SDWebImage这类成熟的图片加载库，它们内部已经处理了复用场景的任务取消问题，只需正确调用即可：

// Kingfisher示例
func setup(_ cat: Cat) {
    catImageView.kf.setImage(with: cat.imageURL)
    // 如需手动取消，也可以在prepareForReuse里加：
    // catImageView.kf.cancelDownloadTask()
}

总结 #

核心就是重置cell状态+取消旧的异步任务，确保复用后的cell不会被之前未完成的请求干扰。RxSwift场景下，替换cell的disposeBag是销毁旧订阅的关键。

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