在自定义 collectionview 单元格中填充图像而不会闪烁

Posted 2023-03-03

【中文标题】在自定义 collectionview 单元格中填充图像而不会闪烁

【英文标题】：Populating images in custom collectionview cells without flickering

【发布时间】：2018-02-23 11:09:03

【问题描述】：

我遇到了填充单元格的问题。当滚动速度非常快时，单元格会浏览 2-3 个图像，然后才能找到正确的图像。我加载了一个包含 1000 个项目的 JSON 数组，并使用其中的 url 来获取具有此扩展名的图像：

extension UIImageView 

func downloadedFrom(url: URL, contentMode mode: UIViewContentMode = .scaleAspectFill) 
    contentMode = mode
    URLSession.shared.dataTask(with: url)  data, response, error in
        guard
            let httpURLResponse = response as? HTTPURLResponse, httpURLResponse.statusCode == 200,
            let mimeType = response?.mimeType, mimeType.hasPrefix("image"),
            let data = data, error == nil,
            let image = UIImage(data: data)
            else  return 
        DispatchQueue.main.async() 
            self.image = image
        
        .resume()

func downloadedFrom(link: String, contentMode mode: UIViewContentMode = .scaleAspectFill) 
    guard let url = URL(string: link) else  return 
    downloadedFrom(url: url, contentMode: mode)

除了上述问题之外，这一切都很好。但我也想知道是否有更好的方法来加载数组中的一些项目，然后在滚动时附加更多？我应该提一下，我的 fetchData 函数还包含数组函数中的追加。

非常感谢。

【问题讨论】：

您没有显示所有相关的代码行。你提到 UICollectionView。但是您的代码没有任何迹象。

您需要在单元格上和 self.image = image 内部有一个标识符属性。如果标识符与其中一个单元格不匹配，则不设置图像。你会发现这是重复的。您还需要在每次调用之前将图像设置为 nil，这样您就不会在之前获取图像，因为单元格被重复使用。使用扩展来做到这一点有点棘手。使用子类会更幸运。 ***.com/questions/44743591/…

Download and cache images in UITableViewCell的可能重复

【参考方案1】：

你可以重写这个方法...

override func prepareForReuse() 
   super.prepareForReuse()

   //hide or reset anything you want hereafter, for example
   imgView.image = nil //whatever

 

【参考方案2】：

当滚动速度非常快时，2 - 3 个图像会发生变化，因为您可能正在使用 dequeReusableCells 函数，这意味着单元格正在被重用。正如您所提到的，您加载了一个包含 1000 个项目的数组。诀窍是使用分页首先获取 10 或 20 个项目，然后滚动到底部获取下一个 10 或 20。 为此，您可能需要调整 API 以适应您的请求。如果您正在使用集合视图，此功能将帮助您检测是否已到达集合视图的末尾，是时候获取接下来的 10 或 20 个项目了。

public func collectionView(_ collectionView: UICollectionView, willDisplay cell: UICollectionViewCell, forItemAt indexPath: IndexPath)