CollectionsView choppy performance when loading images from a URL from Firebase

Question

There seems to be choppy performance when loading images from Firebase and then populating it into the cells. I figure it could be because the images are not cached.

This is located in the function to gather URL from the returned search results immediately after viewDidLoad()

let databaseRef = FIRDatabase.database().reference()

            databaseRef.child("palettes").queryOrdered(byChild: "top").queryEqual(toValue: "#000000").observeSingleEvent(of: .value, with: { (snapshot) in


                if let snapDict = snapshot.value as? [String:AnyObject]{

                    for each in snapDict as [String:AnyObject]{

                        let URL = each.value["URL"] as! String
                        self.URLArray.append(URL)

                        print(self.URLArray)
                    }
                }
            })

And here's the function to populate the cells:

override func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cell", for: indexPath)
        let textLabel = cell.viewWithTag(2)

        let ootdImage = cell.viewWithTag(4) as! UIImageView

        if let url = NSURL(string: self.URLArray[indexPath.row]) {
            if let data = NSData(contentsOf: url as URL){
                ootdImage.image = UIImage(data: data as Data)
            }
        }

        // display images from the dataArray.
        textLabel?.backgroundColor = averageColor

        return cell

Don't worry about collectionsView.reloadData(), currently, I've set it such that I have to manually tap a button to reload data, but I still don't understand why there's a lag in the scrolling, especially since all the data has already been gathered.

score 1 · Accepted Answer · answered Oct 11 '16 at 07:54

1

Performance is low because your are downloading each image from main thread , which blocks the UI.Download image asynchronously and update the collection view cell,this will solves the performance issue.

When ever you scroll,each image associated with the cell getting downloaded in main thread and causes laggy scrolling.

answered Oct 11 '16 at 07:54

user3608500

835
4
10

Thanks that worked, I set it such that the handling of downloading and conversion of data to UIImage is done on a seperate function. But now there's still a lag in the downloading and displaying of images. – Ler Ws Oct 11 '16 at 13:29

CollectionsView choppy performance when loading images from a URL from Firebase

1 Answers1