How to load images as the user scrolls down in a collectionsView? - ios

Question

How to set it such that images are downloaded one by one and those that are downloaded are loaded first? Also, how to handle more image downloads as the user scrolls down while purging or clearing those on top?
Here's my code to download those images asynchronously from Firebase:
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
if let url = NSURL(string: URL) {
if let data = NSData(contentsOf: url as URL){
let image = UIImage(data: data as Data)
self.imageArray.append(image!)
self.collectionView?.reloadData()
}
}
}
}
})
And here's my code for populating collectionView:
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
ootdImage.image = imageArray[indexPath.row]
textLabel?.backgroundColor = averageColor
return cell
}
Edit: Right now, as my JSON tree only contains three entries, only three images are downloaded. But they are downloaded altogether and thus I figure it must be the reason why it takes a few seconds before all three images are downloaded and appear in the same instant.

Answer 1

func scrollViewDidScroll(scrollView: UIScrollView)
{
if scrollView.contentSize.height == scrollView.bounds.size.height + scrollView.bounds.origin.y {
//call web service here
}
}
Also add UIScrollViewDelegate in your class.

Answer 2

I found a solution to this:
Using alamofireImage,
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.URLArrayString.append(URL)
print(self.URLArrayString.count)
self.collectionView?.reloadData() //Reloads data after the number and all the URLs are fetched
}
}
})
after fetching all the URLs and total number of URLs, it will reload the cell immediately (images are not yet downloaded at this point, we let alamofireImage handle the image downloads one by one) which brings us to the next code:
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
// find out how to make it such that the data is gathered before being displayed.
//ootdImage.image = imageArray[indexPath.row]
let url = NSURL(string: URLArrayString[indexPath.row])
let placeholderImage = UIImage(named: "Rectangle")!
let filter = AspectScaledToFillSizeWithRoundedCornersFilter(
size: ootdImage.frame.size,
radius: 0
)
ootdImage.af_setImage(withURL: url as! URL, placeholderImage: placeholderImage, filter: filter, imageTransition: .crossDissolve(0.2)
)
textLabel?.backgroundColor = averageColor
return cell
}