Swift TableView启动时自动加载图片问题求助

嘿，我懂你遇到的困扰——RSS应用里的图片非得滚动TableView才显示，这其实是TableView的cell复用机制和你当前的图片加载逻辑没配合好导致的，咱们一步步来搞定它：

问题根源分析 #

你现在用URLSession.shared.dataTask异步下载图片，完成后直接给cell.imageView?.image赋值，但这里有两个明显的坑：

• 异步任务完成时，原来的cell可能已经被TableView复用去展示别的列表项了，这时候赋值会导致图片显示错位，而且只有滚动触发复用后才会更新；
• 没有图片缓存，每次滚动都会重新下载，不仅加载慢还浪费用户流量。

解决方案 #

1. 适配Cell复用：确保图片给对正确的Cell

给你的Cell加一个关联图片URL的属性，在异步回调里先判断当前Cell是否还是对应要加载的图片项，再赋值：

// 用关联对象给UITableViewCell添加自定义属性（也可以直接写自定义Cell子类）
extension UITableViewCell {
    private static let imageUrlKey = UnsafeRawPointer(bitPattern: "imageUrlString".hashValue)!
    
    var imageUrlString: String? {
        get { objc_getAssociatedObject(self, UITableViewCell.imageUrlKey) as? String }
        set { objc_setAssociatedObject(self, UITableViewCell.imageUrlKey, newValue, .OBJC_ASSOCIATION_COPY_NONATOMIC) }
    }
}

// 加载图片的配置逻辑
func setupCell(_ cell: UITableViewCell, for indexPath: IndexPath) {
    let article = yourArticleList[indexPath.row]
    guard let imageUrl = URL(string: article.imageUrl) else {
        cell.imageView?.image = UIImage(named: "placeholder") // 设置占位图
        return
    }
    
    cell.imageUrlString = imageUrl.absoluteString
    cell.imageView?.image = UIImage(named: "placeholder") // 先显示占位图
    
    let task = URLSession.shared.dataTask(with: imageUrl) { data, response, error in
        guard let data = data, error == nil, let image = UIImage(data: data) else { return }
        
        DispatchQueue.main.async {
            // 检查当前Cell是否仍对应这个图片URL，避免复用错位
            if cell.imageUrlString == imageUrl.absoluteString {
                cell.imageView?.image = image
            }
        }
    }
    task.resume()
}

2. 加入图片缓存：避免重复下载

用NSCache实现内存缓存，这样滚动回来时直接从缓存取图片，不用重新下载：

// 全局缓存对象，建议放在ViewModel或者单例中
let imageCache = NSCache<NSString, UIImage>()

// 修改加载逻辑，优先查缓存
func setupCell(_ cell: UITableViewCell, for indexPath: IndexPath) {
    let article = yourArticleList[indexPath.row]
    guard let imageUrl = URL(string: article.imageUrl) else {
        cell.imageView?.image = UIImage(named: "placeholder")
        return
    }
    
    cell.imageUrlString = imageUrl.absoluteString
    
    // 先检查缓存
    if let cachedImage = imageCache.object(forKey: imageUrl.absoluteString as NSString) {
        cell.imageView?.image = cachedImage
        return
    }
    
    cell.imageView?.image = UIImage(named: "placeholder")
    
    let task = URLSession.shared.dataTask(with: imageUrl) { data, response, error in
        guard let data = data, error == nil, let image = UIImage(data: data) else { return }
        
        // 存入缓存
        imageCache.setObject(image, forKey: imageUrl.absoluteString as NSString)
        
        DispatchQueue.main.async {
            if cell.imageUrlString == imageUrl.absoluteString {
                cell.imageView?.image = image
            }
        }
    }
    task.resume()
}

3. 预加载优化：提前加载即将显示的图片

利用TableView的willDisplay方法，提前加载即将进入屏幕的Cell的图片，让滚动时图片显示更流畅：

override func tableView(_ tableView: UITableView, willDisplay cell: UITableViewCell, forRowAt indexPath: IndexPath) {
    // 调用上面的配置方法，提前触发图片加载
    setupCell(cell, for: indexPath)
}

偷懒小技巧：用成熟的第三方库

如果不想自己写这些繁琐的逻辑，直接用Kingfisher或者SDWebImage这类第三方库，它们已经封装了缓存、Cell复用处理、加载动画、错误处理等所有细节，一行代码就能搞定：

// Kingfisher示例
cell.imageView?.kf.setImage(with: imageUrl, placeholder: UIImage(named: "placeholder"))

// SDWebImage示例
cell.imageView?.sd_setImage(with: imageUrl, placeholderImage: UIImage(named: "placeholder"))

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