Firebase Storage图片下载完成前展示TableView的问题求助

这个问题我太有共鸣了——UITableView的复用机制本来是为了性能优化，但在异步加载图片时，很容易出现相同identifier的单元格先显示旧图再刷新新图的尴尬情况。结合你提到的尝试，我给你几个落地的解决方案：

1. 先搞定复用带来的旧图残留：重置+取消旧任务 #

单元格被复用时，之前的图片下载任务可能还在后台跑，等它完成后就会覆盖当前单元格的新图片。所以第一步要做的是：

• 复用单元格时，先把imageView重置为占位图（比如灰色背景图或者默认图标），避免显示旧内容
• 取消当前单元格正在进行的下载任务，防止旧任务干扰新内容

举个代码例子（假设你用Swift+Firebase）：

// 给自定义Cell加一个属性，用来保存当前的下载任务
class CustomTableViewCell: UITableViewCell {
    @IBOutlet weak var itemImageView: UIImageView!
    var currentDownloadTask: StorageDownloadTask?
    
    override func prepareForReuse() {
        super.prepareForReuse()
        // 重置图片为占位图
        itemImageView.image = UIImage(named: "placeholder")
        // 取消正在进行的下载任务
        currentDownloadTask?.cancel()
        currentDownloadTask = nil
    }
}

// 在cellForRowAt里加载图片
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCell(withIdentifier: "CustomCell", for: indexPath) as! CustomTableViewCell
    let dataItem = dataSource[indexPath.row]
    let storageRef = Storage.storage().reference(withPath: dataItem.imagePath)
    
    // 先检查缓存（后面会讲缓存），如果有直接用
    if let cachedImage = imageCache.object(forKey: dataItem.imagePath as NSString) {
        cell.itemImageView.image = cachedImage
        return cell
    }
    
    // 发起新的下载任务
    cell.currentDownloadTask = storageRef.getData(maxSize: 10 * 1024 * 1024) { data, error in
        guard let data = data, error == nil else {
            // 处理错误，比如显示错误占位图
            cell.itemImageView.image = UIImage(named: "error-placeholder")
            return
        }
        let image = UIImage(data: data)
        // 更新UI要在主线程
        DispatchQueue.main.async {
            cell.itemImageView.image = image
            // 存入缓存
            imageCache.setObject(image!, forKey: dataItem.imagePath as NSString)
        }
    }
    return cell
}

2. 用协程优化异步加载体验 #

你提到尝试用协程，这确实是让异步代码更简洁易维护的好办法。比如用Swift的async/await（iOS 15+）来重构下载逻辑，避免回调嵌套，同时更好地控制任务取消：

// 封装Firebase图片下载的异步方法
extension StorageReference {
    func getImageAsync(maxSize: Int64 = 10 * 1024 * 1024) async throws -> UIImage {
        let data = try await getData(maxSize: maxSize)
        guard let image = UIImage(data: data) else {
            throw NSError(domain: "ImageError", code: 0, userInfo: [NSLocalizedDescriptionKey: "Invalid image data"])
        }
        return image
    }
}

// 在cellForRowAt里用协程加载
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCell(withIdentifier: "CustomCell", for: indexPath) as! CustomTableViewCell
    let dataItem = dataSource[indexPath.row]
    let storageRef = Storage.storage().reference(withPath: dataItem.imagePath)
    
    // 重置占位图
    cell.itemImageView.image = UIImage(named: "placeholder")
    
    // 检查缓存
    if let cachedImage = imageCache.object(forKey: dataItem.imagePath as NSString) {
        cell.itemImageView.image = cachedImage
        return cell
    }
    
    // 用Task异步加载，同时绑定到cell，方便复用取消
    cell.currentTask = Task {
        do {
            let image = try await storageRef.getImageAsync()
            // 要检查Task是否已取消（比如cell被复用了），避免更新已复用的cell
            guard !Task.isCancelled else { return }
            DispatchQueue.main.async {
                cell.itemImageView.image = image
                imageCache.setObject(image, forKey: dataItem.imagePath as NSString)
            }
        } catch {
            guard !Task.isCancelled else { return }
            DispatchQueue.main.async {
                cell.itemImageView.image = UIImage(named: "error-placeholder")
            }
        }
    }
    
    return cell
}

// 在Cell的prepareForReuse里取消Task
class CustomTableViewCell: UITableViewCell {
    @IBOutlet weak var itemImageView: UIImageView!
    var currentTask: Task<Void, Error>?
    
    override func prepareForReuse() {
        super.prepareForReuse()
        itemImageView.image = UIImage(named: "placeholder")
        currentTask?.cancel()
        currentTask = nil
    }
}

3. 加上缓存，从根源减少重复下载 #

不管你用哪种异步方式，缓存都是提升体验的关键——把已经下载的图片存在内存（NSCache）和磁盘（比如FileManager）里，下次加载直接取缓存，不用再走网络：

// 全局缓存实例
let imageCache = NSCache<NSString, UIImage>()
// 可以设置缓存大小，比如最多存100张图
imageCache.countLimit = 100

磁盘缓存的话，可以自己实现把图片存在Documents目录，或者用成熟的第三方库简化开发。

为什么之前把下载移到初始化环节不行？ #

因为数据初始化是在主线程或者提前完成的，而图片下载是异步的，这就导致视图已经显示了，但图片还没下载好，所以会出现空内容。正确的做法应该是视图先显示占位图，异步加载图片后再更新，而不是等图片下载完再显示视图——那样会导致列表加载卡顿，反而影响体验。

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