Asynchronously Loading Image constantly causes image to flicker?

Question

I have a header view for every UITableViewCell. In this header view, I load a picture of an individual via an asynchronous function in the Facebook API. However, because the function is asynchronous, I believe the function is called multiple times over and over again, causing the image to flicker constantly. I would imagine a fix to this issue would be to load the images in viewDidLoad in an array first, then display the array contents in the header view of the UITableViewCell. However, I am having trouble implementing this because of the asynchronous nature of the function: I can't seem to grab every photo, and then continue on with my program. Here is my attempt:

    //Function to get a user's profile picture
    func getProfilePicture(completion: (result: Bool, image: UIImage?) -> Void){
        // Get user profile pic
        let url = NSURL(string: "https://graph.facebook.com/1234567890/picture?type=large")
        let urlRequest = NSURLRequest(URL: url!)
        //Asynchronous request to display image
        NSURLConnection.sendAsynchronousRequest(urlRequest, queue: NSOperationQueue.mainQueue()) { (response:NSURLResponse!, data:NSData!, error:NSError!) -> Void in
            if error != nil{
                println("Error: \(error)")
            }
            // Display the image
            let image = UIImage(data: data)
            if(image != nil){
                completion(result: true, image: image)
            }
        }
    }
    override func viewDidLoad() {
      self.getProfilePicture { (result, image) -> Void in
          if(result == true){
              println("Loading Photo")
              self.creatorImages.append(image!)
          }
          else{
              println("False")
          }
      }
    }

    func tableView(tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
      //Show section header cell with image
      var cellIdentifier = "SectionHeaderCell"
      var headerView = tableView.dequeueReusableCellWithIdentifier(cellIdentifier) as! SectionHeaderCell
      headerView.headerImage.image = self.creatorImages[section]
      headerView.headerImage.clipsToBounds = true
      headerView.headerImage.layer.cornerRadius = headerView.headerImage.frame.size.width / 2
      return headerView
    }

As seen by the program above, I the global array that I created called self.creatorImages which holds the array of images I grab from the Facebook API is always empty and I need to "wait" for all the pictures to populate the array before actually using it. I'm not sure how to accomplish this because I did try a completion handler in my getProfilePicture function but that didn't seem to help and that is one way I have learned to deal with asynchronous functions. Any other ideas? Thanks!

Answer 1

I had the same problem but mine was in Objective-C Well, the structure is not that different, what i did was adding condition with: headerView.headerImage.image

Here's an improved solution that i think suits your implementation.. since you placed self.getProfilePicture inside viewDidLoad it will only be called once section==0 will only contain an image,

the code below will request for addition image if self.creatorImages's index is out of range/bounds

func tableView(tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
      //Show section header cell with image
      var cellIdentifier = "SectionHeaderCell"
      var headerView = tableView.dequeueReusableCellWithIdentifier(cellIdentifier) as! SectionHeaderCell


      if (section < self.creatorImages.count) // validate self.creatorImages index to prevent 'Array index out of range' error
      {
          if (headerView.headerImage.image == nil) // prevents the blinks
          {
              headerView.headerImage.image = self.creatorImages[section];
          }
      }
      else // requests for additional image at section
      {
          // this will be called more than expected because of tableView.reloadData()
          println("Loading Photo")

          self.getProfilePicture { (result, image) -> Void in
              if(result == true) {
                  //simply appending will do the work but i suggest something like:

                  if (self.creatorImages.count <= section)
                  {
                      self.creatorImages.append(image!)

                      tableView.reloadData()

                      println("self.creatorImages.count \(self.creatorImages.count)")
                  }
                 //that will prevent appending excessively to data source
              }
              else{
                  println("Error loading image")
              }
          }
      }

      headerView.headerImage.clipsToBounds = true
      headerView.headerImage.layer.cornerRadius = headerView.headerImage.frame.size.width / 2
      return headerView
    }

You sure have different implementation from what i have in mind, but codes in edit history is not in vain, right?.. hahahaha.. ;) Hope i've helped you.. Cheers!