UICollectionView图片加载缓存问题：初始加载时ImageView暂显其他缓存图

这个问题我之前也碰到过，本质是UICollectionView的cell复用机制在搞事情：当cell被滚动出屏幕后会被回收复用，之前绑定的图片并没有被清空，新的图片请求还未完成时，ImageView就会短暂显示上一次复用的旧图，也就是大家常说的“复用残留”。下面给你几个针对性的解决方案，结合你的代码来调整：

1. 重写cell的prepareForReuse方法清空图片 #

这是最基础也最有效的一步，确保cell被复用前先把ImageView的状态重置：

class YourCollectionViewCell: UICollectionViewCell {
    @IBOutlet weak var imageView: UIImageView!
    
    override func prepareForReuse() {
        super.prepareForReuse()
        // 清空图片，让ImageView在新图加载前保持空白
        imageView.image = nil
    }
}

2. 配置cell时先清空再处理缓存和请求 #

在你给cell设置图片的逻辑里，先把ImageView的image设为nil，再去检查缓存或者发起请求，从源头避免复用的旧图残留：

// 假设这是你在cellForItemAt里的配置逻辑
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "YourCellID", for: indexPath) as! YourCollectionViewCell
    let urlString = yourImageURLs[indexPath.item]
    
    // 第一步：先清空ImageView，确保初始状态是空白
    cell.imageView.image = nil
    
    // 第二步：先查本地缓存，有缓存直接设置
    if let cachedImage = imageCache.object(forKey: NSString(string: urlString)) {
        cell.imageView.image = cachedImage
        return cell
    }
    
    // 第三步：缓存没命中，发起网络请求
    AF.request(urlString).responseImage { response in
        // 这里要先确认当前cell还是对应indexPath的那个，避免滚动后旧请求返回错误设置
        guard let currentCell = collectionView.cellForItem(at: indexPath) as? YourCollectionViewCell else {
            return
        }
        if case .success(let image) = response.result {
            // 更新缓存
            imageCache.setObject(image, forKey: NSString(string: urlString))
            // 设置图片到当前cell的ImageView
            currentCell.imageView.image = image
        }
    }
    
    return cell
}

3. 可选进阶：取消未完成的网络请求 #

如果用户快速滚动列表，很多未完成的请求可能会导致图片加载混乱，你可以给每个cell加个请求取消机制，避免旧请求返回后错误设置新复用cell的图片：

// 在cell类里保存当前的请求任务
class YourCollectionViewCell: UICollectionViewCell {
    @IBOutlet weak var imageView: UIImageView!
    var currentRequest: URLSessionDataTask?
    
    override func prepareForReuse() {
        super.prepareForReuse()
        imageView.image = nil
        // 取消当前未完成的请求
        currentRequest?.cancel()
        currentRequest = nil
    }
}

// 在配置cell时，把请求绑定到cell的currentRequest
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "YourCellID", for: indexPath) as! YourCollectionViewCell
    let urlString = yourImageURLs[indexPath.item]
    
    cell.imageView.image = nil
    // 先取消cell上可能存在的未完成请求
    cell.currentRequest?.cancel()
    
    if let cachedImage = imageCache.object(forKey: NSString(string: urlString)) {
        cell.imageView.image = cachedImage
        return cell
    }
    
    let task = AF.request(urlString).responseImage { response in
        guard case .success(let image) = response.result else { return }
        imageCache.setObject(image, forKey: NSString(string: urlString))
        cell.imageView.image = image
    }
    // 把请求任务赋值给cell的currentRequest
    cell.currentRequest = task.task as? URLSessionDataTask
    
    return cell
}

这样调整后，就能彻底解决ImageView短暂显示旧图的问题，确保新图片加载完成前ImageView保持空白。

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