Loading images async in tableview - swift

Question

I've written a async method to load pictures into a tableview. But the problem is that the image is not loading because it will not update automatically only after scrolling. I have tried to add:
tableView.reloadRows(at: [indexPath], with: UITableView.RowAnimation.none)
But this will only keep refreshing the row the whole time with different images. The second problem is that after scrolling the images will show but sometimes the images will load in the wrong row.
Could please someone help me with this problem because i can't figure it out.
override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: "ArticleCell", for: indexPath)
let article = newsArticles!.articles[indexPath.row]
cell.textLabel?.text = article.title
cell.detailTextLabel?.text = article.content
cell.imageView?.image = nil
if let url = article.urlToImage {
imageLoader.obtainImageWithPath(imagePath: url) { (image) in
if let updateCell = tableView.cellForRow(at: indexPath) {
updateCell.imageView?.image = image
tableView.reloadRows(at: [indexPath], with: UITableView.RowAnimation.none)
}
}
}
return cell
}
Imageloader:
class ImageLoader {
var imageCache = NSCache<NSString, UIImage>()
init() {
self.imageCache = NSCache()
}
func obtainImageWithPath(imagePath: URL, completionHandler: #escaping (UIImage) -> ()) {
if let image = self.imageCache.object(forKey: imagePath.absoluteString as NSString) {
DispatchQueue.main.async {
completionHandler(image)
}
} else {
let placeholder: UIImage = UIImage(named: "placeholderImage")!
DispatchQueue.main.async {
completionHandler(placeholder)
}
let task = URLSession.shared.dataTask(with: imagePath, completionHandler: {data, response, error in
let image: UIImage! = UIImage(data: data!)
self.imageCache.setObject(image, forKey: imagePath.absoluteString as NSString)
DispatchQueue.main.async {
completionHandler(image)
}
})
task.resume()
}
}
}

Answer 1

Update your ImageLoader code to let you check if an image is already in the cache and return it synchronously to you.
Then when you load the cell, if it has the image, set it immediately. If it doesn't have the image, have the completion handler instead do a reload on the cell at that index path. Then, since the image is now cached, your regular cell loading code will be able to populate the image. Just make sure you only request the image if it wasn't already set from the cache.
The way your code is written right now, whether it set an image from the cache or not in your completion handler, it's endlessly trying to reload the row that it just set the image on, which is also going to impact performance. Hence why, as I said, you should only reload the cell if a new image was just downloaded. And don't set the image in the completion handler, just reload the row.