Images not appearing in PFQueryCollectionViewController

Question

I'm working on an iPhone app that should display images in a UICollectionView. The images are saved on the Parse cloud, and I'm using a subclass of PFQueryCollectionViewController to make the query and display the images.

Tapping on a MKMapView callout triggers the segue that shows the CollectionViewController. The images do not appear in the cells the first time the CollectionViewController is presented. However, if I go back to the MapView, and then return to the CollectionViewController, the images appear in the cells.

How can I get the images to appear the first time the PFQueryCollectionViewController is presented?

Here's my code:

class PhotoGridCollectionViewController: PFQueryCollectionViewController {

override func viewDidAppear(animated: Bool) {
}

override func viewDidLoad() {
  super.viewDidLoad()
}

override func didReceiveMemoryWarning() {
  super.didReceiveMemoryWarning()
  // Dispose of any resources that can be recreated.
}

// MARK: UICollectionViewDataSource

override func numberOfSectionsInCollectionView(collectionView: UICollectionView) -> Int {
  //#warning Incomplete method implementation -- Return the number of sections
  return 1
}

override func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
  //#warning Incomplete method implementation -- Return the number of items in the section
  return self.objects.count
}

override func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath, object: PFObject?) -> PFCollectionViewCell? {

  let cell = collectionView.dequeueReusableCellWithReuseIdentifier("venuePhotoThumb", forIndexPath: indexPath) as! PhotoGridCollectionViewCell

  if let pfObject = object {
    cell.imageView.file = pfObject["imageFile"] as? PFFile
    cell.imageView.loadInBackground({ (img, err) -> Void in
      println("Download complete")
    })
  }

  return cell
}

}

Since I'm using Storyboards, I pass my custom class the parseClass by setting it in the Attribute Inspector:

As you can see, I'm using the loadInBackground method of the PFImageView to load the images asynchronously, and I think this the problem might be caused by the images being downloaded after the cell is returned, but I don't have any other ideas. Does anyone know why the images are not appearing the first time the view is presented?

Answer 1

My co-developer finally found the answer to this. We had to set a placeholder image for the PFImageViews when configuring the cells in cellForItemAtIndexPath. The code examples on Parse do include setting the placeholder image, but they don't say that it is required for the PFQueryCollectionViewController to work properly. We considered it an aesthetic touch that we could come back to later.

So the answer is: in order for images to load properly in the cells of a PFQueryCollectionViewController you MUST provide a placeholder image when configuring the cells in cellForItemAtIndexPath.

Here's the code that worked:

let placeholder = UIImage(named: "myPlaceholderImage")  //an image from images.xcassets in your xcode project
cell.imageView.image = placeholder

if let pfObject = object {
    cell.imageView.file = pfObject["image"] as? PFFile
    cell.imageView.loadInBackground()
}