CollectionViewCell 图像在滚动之前不会显示答案

【问题标题】：CollectionViewCell image doesn't display until scrollingCollectionViewCell 图像在滚动之前不会显示
【发布时间】：2017-08-02 16:01:02
【问题描述】：

我正在使用此代码在我的 customCell 中显示图像。 This 是我从 API 获取图像的代码。根据给定的链接，它工作正常。但是，当我将此代码添加到我的 cellForItemAt indexPath: 用于图像缓存时，问题就开始了。

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {

    // Displaying other elements with text

    customCell.mainImage.image = nil

    var image1 = self.imageCache.object(forKey: indexPath.item as AnyObject) as? UIImage

        if (image1 == nil) {
            self.ImageFetcher(postId: self.myArray[indexPath.item].id!, completion: { (image) in
            image1 = image
            self.imageCache.setObject(image1!, forKey: indexPath.item as AnyObject)
        })
    }
    DispatchQueue.main.async {
        customCell.mainImage.image = image1
    }
}

上面的代码可以正常工作，没有任何错误，但是在我上下滚动 collectionView 之前不会显示/加载图像。不明白我在这里缺少什么。任何帮助，将不胜感激！！

【问题讨论】：

image1 = image => DispatchQueue.main.async { customCell.mainImage.image = image }
我尝试在ImageFetcher 中添加customCell.mainImage.image = image，但随后单元格显示错误图像，然后在快速滚动时再次更改为正确图像。
显示错误图片的原因是您在重复使用单元格时没有取消之前的图片加载。
我确实在我的 customCell 类中尝试了override func prepareForReuse() { mainImage.image = nil super.prepareForReuse() }，但没有区别！
@Snehal 我认为你的 imageFetcher 功能不好

标签： xcode asynchronous swift3 grand-central-dispatch image-caching

【解决方案1】：

请试试这个，

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {

    // Displaying other elements with text

    if let image1 = self.imageCache.object(forKey: indexPath.item as AnyObject) as? UIImage
    {
        customCell.mainImage.image = image1
    }
    else {
        self.ImageFetcher(postId: self.myArray[indexPath.item].id!, completion: { (image) in
            self.imageCache.setObject(image, forKey: indexPath.item as AnyObject)
            customCell.mainImage.image = image1
        })
    }
}

【讨论】：

【解决方案2】：

步骤：1 创建 uiimageview 扩展以从 url 下载图像，如果已经下载则从缓存中下载

   let imageCache = NSCache()
    extension UIImageView {

    func loadImageUsingCacheWithURLString(url: NSURL) {

        self.image = nil

        // First check if there is an image in the cache
        if let cachedImage = imageCache.objectForKey(url) as? UIImage {

            self.image = cachedImage

            return
        }

        else {
        // Otherwise download image using the url location in Google Firebase
        NSURLSession.sharedSession().dataTaskWithURL(url, completionHandler: { (data, response, error) in

            if error != nil {
                print(error)
            }
            else {
                dispatch_async(dispatch_get_main_queue(), {

                    // Cache to image so it doesn't need to be reloaded every time the user scrolls and table cells are re-used.
                    if let downloadedImage = UIImage(data: data!) {

                        imageCache.setObject(downloadedImage, forKey: url)
                        self.image = downloadedImage

                    }
                })
            }
            }).resume()
        }

    }

第 2 步：用法

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {

    // Displaying other elements with text
    customCell.mainImage.loadImageUsingCacheWithURLString(url: yoururl)
 }

【讨论】：