Why do I have to click the row to reveal the image since it has been loaded? - swift

Question

I am on the assignment 4 of Stanford Course "Developing iOS 8 Apps With Swift" by Paul Hegarty. The assignment is developing an app searching Twitter to get some tweets and display them in a tweets table view. And if i click one row of the tweets table view, it segues to a detail table view which displays the hashtag, urls, user mentioned and attached media photos of the tweet in four sections.
The media photo section displays the images attached in the tweet in its own custom cell called mediaCell which contains only a single imageView. But I find, after the image in the image URL is loaded to the imageView of the mediaCell using NSData(contentsOfURL:) and UIImage(data:)method, the imageView's image doesn't show until I click the row which has no segues. Just one click can show the image and if i don't click, the image just exists in the memory and can't be drawn in the correspond imageView.
Here is the code downloading image in the URL and loading it to the imageView in the mediaCell.
The mediaCell is a custom UITableViewCell which only has an imageView called mediaImageView.
override func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCellWithIdentifier(Storyboard.tweetDetailGeneralCellIdentifier, forIndexPath: indexPath)
// Configure the cell...
switch indexPath.section {
case 0:
cell.textLabel?.text = tweet.hashtags[indexPath.row].keyword
return cell
case 1:
cell.textLabel?.text = tweet.urls[indexPath.row].keyword
return cell
case 2:
cell.textLabel?.text = tweet.userMentions[indexPath.row].keyword
return cell
case 3:
let mediaCell = tableView.dequeueReusableCellWithIdentifier(Storyboard.tweetDetailMediaCellIdentifier, forIndexPath: indexPath) as! TweetDetailMediaCell
if !tweet.media.isEmpty {
for media in tweet.media {
let qos = Int(QOS_CLASS_USER_INITIATED.rawValue)
let queue = dispatch_get_global_queue(qos, 0)
dispatch_async(queue){
let imageData = NSData(contentsOfURL: media.url)
if imageData != nil {
dispatch_async(dispatch_get_main_queue()) {
mediaCell.mediaImageView.image = UIImage(data: imageData!)
print("mediaCellImage is loaded")
}
}
}
}
}
return mediaCell
default: break
}
return cell
}
when the "mediaCellImage is loaded" is printed, the image load should be finished, but if i don't click the row, the image never show up. if i click even just one time, it will show up.
there is no change if i add "mediaCell.mediaImageView.setNeedsDisplay" after the print("mediaCellImage is loaded").

Answer 1

The problem is that when the image would be loaded, the mediaCell may be dequeued for another row.
Dequeue the cell one more time when an image would be loaded (inside the main queue):
if let mediaCell = tableView.cellForRowAtIndexPath(indexPath) as? TweetDetailMediaCell {
mediaCell.mediaImageView.image = UIImage(data: imageData!)
}

Answer 2

Finally, i find the real reason lies in the number of prototype cell instance which is created more than the number needed.
whenever the table view asks for a cell, i create a prototype cell instance first. and then i check whether it is suitable for the indexPath. if not, i then create a custom cell instance and return it.
That means some prototype cell instances are created unused. cell instance is expensive, i think apple uses this unused cells for some performance enhance(i am not sure about this). Therefore, they affect the custom cell instance appearance, resulting in situation where i have to click the row to reveal the image. After i correct this error, everything works fine. If anybody knows the detail reason, please post here. Really appreciated.
Hope this answer is helpful.