Set Image in visible UITableviewCell after async download - ios

Question

I have a tableView with dynamic cells. Each cell has got an imageView and a textLabel. I'm working with Alamofire & AlamofireImage by the way.
My problem is that the first cells (which you see if view did appear) don't show the images. But if i scroll down i see the images of the other cells. And if scroll up again the images of the first cells appear too.
First of all i download user data in the viewDidLoad method. After this is done I update the tableview with tableView.reloadData().
override func viewDidLoad() {
super.viewDidLoad()
MYRequest_getUsers(//...
,
success: {response -> Void in
self.users = response
dispatch_async(dispatch_get_main_queue(),{
self.tableView.reloadData()
})
},
failure: {NSError -> Void in
debugPrint(NSError)
})
}
TableView counts the users and reloads itself.
override func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return users?.count ?? 0
}
In tableView_cellForRowAtIndexPath method i fill the cells with user data.
let cell = tableView.dequeueReusableCellWithIdentifier(self.identifier) as! UserCell
cell.userNameLabel.tag = indexPath.row
let rowData: User = self.users?[cell.userNameLabel.tag] as User!
cell.userNameLabel.text = rowData.getName()
let avatarURL = rowData.getAvatarURL() ?? ""
cell.userImageView.af_setImageWithURL(imgURL, placeholderImage: placeholderImage)
return cell
My idea was that after user data was loaded, the tableView begin to draw itself and place the name (because it is already in userData). But the image is downloaded (i suppose) asynchronously, so that they come from the backend after some delay and tableView is already drawn. After scrolling up and down i see them.
I want to open the screen and without scrolling up and down. Tableview should set automatically the images after they were loaded. So i thought to make a callback and use instead of
cell.userImageView.af_setImageWithURL(imgURL, placeholderImage: placeholderImage)
this
Alamofire.request(.GET, avatarURL)
.responseImage { response in
cell.userImageView.image = response.2.value
dispatch_async(dispatch_get_main_queue(), { () -> Void in
tableView.setNeedsLayout()
})
}
But nothing changes... I've tried a lot and looked similar problems but can't solve it... I hope you can give me some hints or much better a solution! :)
Thanks in advance

Answer 1

I would like to give you a direction by posting the steps (best practice to follow in such case):
Step 1 : Fetch images in background as soon as you have image URLs available from server. I prefer doing this on operation queue where I download multiple images concurrently. You can write a helper class which takes a completion block and implement NSOperation/NSOperationQueue.
Step 2 : While images are being downloaded, for the eyes of users, put a loading overlay on image view. You can do this in cellForRowAtIndexPath:.
Step 3 : Once images are available, cache them in file system. This is to avoid any scrolling abrupt behaviour.
Step 4 : Once images are available, call the completion block.
Step 5 : In completion block, reload your table on main thread. Ensure your cellForRowAtIndexPath: first check the image in cache, if present use it, if not present show loading overlay if image fetch is on flight. If image is not available in cache and download is also not going on, show some default image.

Answer 2

This question is couple of years old, but maybe this answer can be useful to someone else with a similar problem, like me before to find the right solution.
Since the images are loaded asynchronously, we have to force a cell update when the download is finished if we didn't provide a fixed height for the UIIMageView. This because cell updating (i.e. AutoLayout Constraints recalculation) is done automatically only after cellForRowAt method, that is called when a cell is displayed for the first time, or when the table is scrolled to show other cells. In both cases probably the images are not yet downloaded by the af_setImage() method, so nothing but the placeholder will be displayed as their sizes are unknown for the moment.
To force a cell update we need to use beginUpdates() and endUpdates() methods, putting them inside the completion handler of .af_setImage(). This way, every time the downloading is completed, the cell will be updated.
But, to avoid a loop, before to call beginUpdates()/endUpdates() we have to check if we have already update the cell before, because by calling these methods, the cellForRowAt method is called again and consequently the af_setImage() and its completion closure with beginUpdates()/endUpdates() inside it).
This means that we have to update the cell only when the download is just finished, and not when the imaged is cashed (because, if it is cashed, it means that we have already updated the cell). This can be accomplished by checking the response of the completion handler: if it is not nil, the image was just downoladed, if it is nil, the image was cashed.
As a side benefit the cell height will be automagically adjusted (remember to put tableView.estimatedRowHeight = 400 and tableView.rowHeight = UITableViewAutomaticDimension in your viewDidLoad() method)
Finally, here it is the code:
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
// Dequeue your cell
let cell = self.tableView.dequeueReusableCell(withIdentifier: "YourCustomCellIdentifier") as! YourCustomTableViewCell
// get picture url from the data array
let pictureUrl = self.yourCellsData[indexPath.row].pictureUrl
// async download
cell.pictureView.af_setImage(
withURL: URL(string: pictureUrl)!,
placeholderImage: UIImage(named: "YourPlaceholder.png"),
filter: nil,
imageTransition: UIImageView.ImageTransition.crossDissolve(0.5),
runImageTransitionIfCached: false) {
// Completion closure
response in
if response.response != nil {
// Force the cell update
self.tableView.beginUpdates()
self.tableView.endUpdates()
}
}
return cell
}
That's all folks! ;-)

Answer 3

Few things to achieve this.
call data download in viewwillappear and not in viewdidload.
in viewdidload, hide the tableview.
in viewdidAppear: check the data has downloaded and if so then call
[tableview reloaddata] method.