UICollectionView滚动时PNG图片被GIF图片替换问题求助

这个问题我太熟了！这是UICollectionView的cell复用机制带来的典型坑——当显示PNG的cell滚出屏幕被复用给GIF条目时，之前未完成的GIF加载任务会继续执行，最终覆盖掉刚设置好的PNG图片。下面给你具体的解决方案：

1. 给StickerCell添加复用重置逻辑 #

在自定义的StickerCell中重写prepareForReuse方法，确保cell被复用时，清除旧的图片内容、终止正在进行的GIF加载任务，并停止GIF动画：

class StickerCell: UICollectionViewCell {
    @IBOutlet weak var stickerImageView: UIImageView!
    // 如果你是自己管理GIF加载任务，保存任务引用
    var gifLoadTask: URLSessionDataTask?
    
    override func prepareForReuse() {
        super.prepareForReuse()
        // 清空图片视图
        stickerImageView.image = nil
        // 取消未完成的GIF加载任务
        gifLoadTask?.cancel()
        gifLoadTask = nil
        // 停止GIF动画（如果用UIImageView的animatedImage播放）
        stickerImageView.stopAnimating()
    }
}

2. 在cellForItemAt中按类型正确加载图片 #

在数据源方法里，严格区分GIF和PNG的加载逻辑，确保每个cell被复用后，加载的是当前indexPath对应的图片：

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell { 
    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "StickerCell", for: indexPath) as! StickerCell 
    let stickerString = stickerArray[indexPath.item]
    guard let stickerURL = URL(string: stickerString) else {
        // 处理URL无效的情况
        cell.stickerImageView.image = nil
        return cell
    }
    
    // 根据后缀判断图片类型
    if stickerString.lowercased().hasSuffix(".gif") {
        // 加载GIF，推荐用成熟库比如SDWebImage/ Kingfisher，它们自带复用适配
        cell.stickerImageView.sd_setImage(with: stickerURL, placeholderImage: nil)
        // 如果是自己实现GIF加载，记得把任务赋值给cell的gifLoadTask
        // cell.gifLoadTask = self.loadGIF(from: stickerURL, into: cell.stickerImageView)
    } else {
        // 加载PNG
        cell.stickerImageView.sd_setImage(with: stickerURL, placeholderImage: nil)
        // 用系统API的话要注意主线程更新UI
        // URLSession.shared.dataTask(with: stickerURL) { data, _, error in
        //     guard let data = data, error == nil else { return }
        //     DispatchQueue.main.async {
        //         cell.stickerImageView.image = UIImage(data: data)
        //     }
        // }.resume()
    }
    return cell
}

3. 额外注意事项 #

• 优先用成熟图片加载库：SDWebImage、Kingfisher这类库已经内置了cell复用场景下的任务取消、缓存管理逻辑，能帮你避开大部分这类低级错误。
• 确保类型判断准确：如果你的stickerString不是通过后缀区分类型，要换其他可靠的方式（比如服务器返回的类型字段）来判断是GIF还是PNG。
• 避免异步任务泄漏：如果是自己写的GIF加载逻辑，一定要在cell复用或销毁时终止任务，防止内存泄漏和错误的图片覆盖。

内容的提问来源于stack exchange，提问作者S.S.D