Populating images in custom collectionview cells without flickering

Question

I hva an issue with populating my cells. When scrolling really fast the cells go through 2-3 images before finding the right one. I loaded up an array with a JSON of 1000 items, and used the urls from them to fetch the images with this extension:

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

This all works great, aside from the issue above. But I was also wondering if there was a better way to load up some of the items in the array, and then append more as I scroll? I should mention, my fetchData function, also contains the append in array function.

Thanks so much in advance.

You aren't showning all relevant lines of code. You mention UICollectionView. But your code shows no sign of it. — El Tomato, Feb 23 '18 at 11:17
You need an identifier property on the cell and inside the self.image = image. If the identifier does not match the one of the cells don’t set the image. You will find this is a duplicate. You also need to set the image to nil each time before calling this so you don’t get the image before since cells are reused. To do this with an extension is kind of tricky. You would have more luck with a subclass. https://stackoverflow.com/questions/44743591/download-and-cache-images-in-uitableviewcell — agibson007, Feb 23 '18 at 11:21
Possible duplicate of [Download and cache images in UITableViewCell](https://stackoverflow.com/questions/44743591/download-and-cache-images-in-uitableviewcell) — agibson007, Feb 23 '18 at 11:21

score 1 · Answer 1 · answered Feb 23 '18 at 11:54

1

You can override this method...

override func prepareForReuse() {
   super.prepareForReuse()

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

}

answered Feb 23 '18 at 11:54

Mahendra

8,448
3
33
56

score 0 · Answer 2 · answered Feb 23 '18 at 11:42

When scrolling really fast 2 - 3 images are changing because you are probably using dequeReusableCells function which means cells are being reused. As you mentioned you loaded an array with 1000 items. The trick is to use pagination first fetch 10 or maybe 20 items, then on scroll to bottom fetch the next 10 or 20. In order to do that you may need to adjust your APIs to accommodate your request. If you are using collection view this function will help you detect if you have reached the end of collection view and it's time to fetch the next 10 or 20 items.

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

Populating images in custom collectionview cells without flickering

2 Answers2