CollectionViewCell image doesn't display until

Question

I am using this code to display image in to my customCell. This is my code to fetch image from API. It was working fine as per the given link. But the problem started when I added this code to my cellForItemAt indexPath: for image Cache.

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
    }
}

Above code works fine without any error but, not displaying/loading images until I scroll the collectionView up and down. Don't understand what I am missing here. Any help would be appreciated !!

Answer 1

Please try this,

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
        })
    }
}

Answer 2

STEP:1 Create extension of uiimageview to download image from url, and if already downloaded then from cache

   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()
        }

    }

STEP 2 : Usage

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

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