Swift 3 UICollectionViewCell异步加载GIF快速滚动显示异常问题排查

这个问题的核心原因很明确：单元格被复用时，之前发起的异步GIF加载任务还没完成，当旧任务最终结束时，会把错误的GIF设置到已经复用给新位置的单元格上，直到新位置的GIF加载完成才会覆盖，这就造成了短暂的内容错乱。

下面是针对你的代码的具体修复方案，分几步来：

1. 给单元格添加状态追踪，复用前重置并取消旧任务 #

首先，修改你的gifCollectionViewCell类，添加属性来追踪当前加载的GIF URL和加载任务，确保复用单元格时能清空旧状态、取消未完成的加载：

class gifCollectionViewCell: UICollectionViewCell {
    @IBOutlet weak var gifView: FLAnimatedImageView!
    // 保存当前单元格的目标GIF URL，用于后续验证
    var targetGifURL: URL?
    // 保存KFSwiftImageLoader的加载任务引用，方便取消
    var activeLoadTask: ImageLoadTask?

    override func prepareForReuse() {
        super.prepareForReuse()
        // 复用前清空内容和状态
        gifView.animatedImage = nil
        targetGifURL = nil
        // 取消正在进行的加载任务
        activeLoadTask?.cancel()
    }
}

2. 替换手动加载逻辑，用KFSwiftImageLoader实现可取消的异步加载 #

你已经导入了KFSwiftImageLoader，但目前用Data(contentsOf:)手动加载的方式既没有利用库的缓存机制，也无法取消任务。改用库的API来加载，同时绑定任务到单元格：

修改cellForItemAt方法：

public func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "gifCollectionViewCell", for: indexPath) as! gifCollectionViewCell
    
    guard let gifURLString = trendsGif[indexPath.row], let gifURL = URL(string: gifURLString) else {
        // 没有有效URL时清空单元格内容
        cell.gifView.animatedImage = nil
        return cell
    }
    
    // 标记当前单元格的目标URL
    cell.targetGifURL = gifURL
    // 取消之前未完成的加载任务
    cell.activeLoadTask?.cancel()
    
    // 使用KFSwiftImageLoader加载GIF，支持缓存和任务取消
    cell.activeLoadTask = cell.gifView.loadGif(
        fromUrl: gifURL,
        placeholderImage: nil, // 这里可以设置加载中的占位图优化体验
        completion: { [weak cell] animatedImage, error in
            guard let cell = cell else { return }
            // 关键验证：只有当前单元格的目标URL和加载完成的URL一致时，才设置图片
            if cell.targetGifURL == gifURL {
                cell.gifView.animatedImage = animatedImage
            }
        }
    )
    
    return cell
}

3. 优化数据刷新逻辑，避免频繁调用reloadData #

你的getTrendsGif方法中，每次循环都调用collectionView.reloadData()，这会导致CollectionView频繁刷新，不仅影响性能，还可能加剧复用错误。应该等所有数据处理完成后，一次性更新数组并刷新UI：

修改getTrendsGif中的网络回调部分（搜索和热门分支都要改）：

// 搜索分支的回调示例
if let response = response, let data = response.data {
    // 先在后台处理所有数据，避免阻塞主线程
    var updatedTrends = [String?](repeating: nil, count: limit)
    var updatedWidths = [Int](repeating: 1000, count: limit)
    
    for (index, result) in data.enumerated() {
        if let gifURL = result.images?.fixedHeightSmall?.gifUrl, 
           let gifWidth = result.images?.fixedHeightSmall?.width {
            updatedTrends[index] = gifURL
            updatedWidths[index] = gifWidth
        }
    }
    
    // 所有数据处理完成后，回到主线程更新数据源并刷新UI
    QueueManager.globalMainQueue.async {
        self.trendsGif = updatedTrends
        self.widthGif = updatedWidths
        self.collectionView.reloadData()
    }
}

// 热门分支的回调同理，替换原循环内的reloadData逻辑

额外优化建议 #

可以给单元格添加一个静态占位图（比如加载中的小图标），在GIF加载完成前显示，这样用户不会看到空白或者突兀的内容切换，进一步提升体验。

修复原理总结 #

• 取消旧任务：在单元格复用前终止未完成的加载，避免旧数据覆盖新内容。
• URL验证：加载完成后确认当前单元格的目标URL与加载的URL一致，确保数据匹配。
• 批量刷新：减少不必要的UI刷新次数，提升性能同时避免数据更新混乱。
• 利用专业库能力：KFSwiftImageLoader自带缓存和任务管理，比手动加载更高效可靠。

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