Weird caching issue in UITableView (Swift 4) - ios

Question

I'm having a very odd issue with my app, and all I can think of is that it is some sort of caching issue. Basically, when I scroll my UITableView, the thumbnails that are shown are being reloaded multiple times for the same row, typically with different images each time, before finally landing on the right image.
A short (20 second) screen capture is here: https://youtu.be/oa04mlOgMeQ
The app should be caching these once loaded, and the images are named to match the bonus codes (and the name is in the JSON file). I can't figure out why it is doing this.
EDIT: Here is my cellForRowAt code:
override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cellIdentifier = "BonusListViewCell"
guard let cell = tableView.dequeueReusableCell(withIdentifier: cellIdentifier, for: indexPath) as? BonusListViewCell else {
fatalError("The dequeued cell is not an instance of BonusListViewCell.")
}
// let bonus = bonuses[indexPath.row]
let bonus: JsonFile.JsonBonuses
if isFiltering() {
bonus = filteredBonuses[indexPath.row]
} else {
bonus = bonuses[indexPath.row]
}
let urlString = "http://tourofhonor.com/appimages/"+(bonus.imageName)
let url = URL(string: urlString)
cell.primaryImage.downloadedFrom(url: url!)
cell.nameLabel.text = bonus.name.capitalized
cell.bonusCodeLabel.text = bonus.bonusCode.localizedUppercase
cell.categoryLabel.text = bonus.category
cell.valueLabel.text = "\(bonus.value)"
cell.cityLabel.text = "\(bonus.city.capitalized),"
cell.stateLabel.text = bonus.state.localizedUppercase
return cell
}
Here is my downloadedFrom function:
extension UIImageView {
func downloadedFrom(url: URL, contentMode mode: UIViewContentMode = .scaleAspectFit) {
contentMode = mode
URLSession.shared.dataTask(with: url) { data, response, error in
guard
let httpURLResponse = response as? HTTPURLResponse, httpURLResponse.statusCode == 200,
let mimeType = response?.mimeType, mimeType.hasPrefix("image"),
let data = data, error == nil,
let image = UIImage(data: data)
else { return }
DispatchQueue.main.async() {
self.image = image
}
}.resume()
}
func downloadedFrom(link: String, contentMode mode: UIViewContentMode = .scaleAspectFit) {
guard let url = URL(string: link) else { return }
downloadedFrom(url: url, contentMode: mode)
}
}
My UITableViewCell code is:
import UIKit
class BonusListViewCell: UITableViewCell {
//MARK: Properties
#IBOutlet weak var bonusCodeLabel: UILabel!
#IBOutlet weak var categoryLabel: UILabel!
#IBOutlet weak var nameLabel: UILabel!
#IBOutlet weak var valueLabel: UILabel!
#IBOutlet weak var cityLabel: UILabel!
#IBOutlet weak var stateLabel: UILabel!
#IBOutlet weak var flavorText: UITextView!
#IBOutlet weak var primaryImage: UIImageView!
override func awakeFromNib() {
super.awakeFromNib()
// Initialization code
}
override func setSelected(_ selected: Bool, animated: Bool) {
super.setSelected(selected, animated: animated)
// Configure the view for the selected state
}
}

Answer 1

override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cellIdentifier = "BonusListViewCell"
guard let cell = tableView.dequeueReusableCell(withIdentifier: cellIdentifier, for: indexPath) as? BonusListViewCell else {
fatalError("The dequeued cell is not an instance of BonusListViewCell.")
}
// let bonus = bonuses[indexPath.row]
let bonus: JsonFile.JsonBonuses
if isFiltering() {
bonus = filteredBonuses[indexPath.row]
} else {
bonus = bonuses[indexPath.row]
}
let urlString = "http://tourofhonor.com/appimages/"+(bonus.imageName)
let url = URL(string: urlString)
//set image url
cell.imageUrl = URL(string: images[indexPath.row])
cell.nameLabel.text = bonus.name.capitalized
cell.bonusCodeLabel.text = bonus.bonusCode.localizedUppercase
cell.categoryLabel.text = bonus.category
cell.valueLabel.text = "\(bonus.value)"
cell.cityLabel.text = "\(bonus.city.capitalized),"
cell.stateLabel.text = bonus.state.localizedUppercase
return cell
}
In your cell
import UIKit
class BonusListViewCell: UITableViewCell {
//MARK: Properties
#IBOutlet weak var bonusCodeLabel: UILabel!
#IBOutlet weak var categoryLabel: UILabel!
#IBOutlet weak var nameLabel: UILabel!
#IBOutlet weak var valueLabel: UILabel!
#IBOutlet weak var cityLabel: UILabel!
#IBOutlet weak var stateLabel: UILabel!
#IBOutlet weak var flavorText: UITextView!
#IBOutlet weak var primaryImage: UIImageView!
#IBOutlet weak var activity: UIActivityIndicatorView!
var imageUrl: URL? {
didSet {
loadImage()
}
}
var task: URLSessionDataTask?
override func awakeFromNib() {
super.awakeFromNib()
clean()
}
func loadImage() {
//you need cancel previous task
task?.cancel()
clean()
guard let imageUrl = imageUrl else {
return
}
activity.startAnimating()
task = URLSession.shared.dataTask(with: imageUrl) { [weak self] data, response, error in
DispatchQueue.main.async {
self?.activity.stopAnimating()
if error == nil, let data = data {
self?.primaryImage.image = UIImage(data: data)
}
}
}
task?.resume()
}
func clean() {
primaryImage.image = nil
}
}
But it's better to use libraries like Alamofire or SDWebImage

Answer 2

Your problem is that previously dispatched image fetches are completing after the cell has been reused, resulting in outdated images appearing, in turn, until the final, correct, image is loaded.
There are existing frameworks available that will make this easier for you and also perform caching, but you may not want to introduce 3rd party code into your app.
One approach is to use a UIImageView subclass rather than an extension so that you can add a property for the current url and an in-memory cache:
class LoadableImageView: UIImageView {
private var currentURL: URL?
private static imageCache = NSCache<NSURL,UIImage>()
private static cacheUpdateQueue = DispatchQueue.global(qos: .userInitiated)
func downloadedFrom(url: URL, contentMode mode: UIViewContentMode = .scaleAspectFit) {
contentMode = mode
self.currentURL = url
if let image = LoadableImageView.imageCache.object(forKey:url as NSURL) {
self.image = image
return
}
URLSession.shared.dataTask(with: url) { data, response, error in
guard
let httpURLResponse = response as? HTTPURLResponse, httpURLResponse.statusCode == 200,
let mimeType = response?.mimeType, mimeType.hasPrefix("image"),
let data = data, error == nil,
let image = UIImage(data: data),
url == self.currentURL
else { return }
LoadableImageView.cacheUpdateQueue.sync {
LoadableImageView.imageCache.setObject(image, forKey: url as NSURL)
}
DispatchQueue.main.async() {
self.image = image
}
}.resume()
}
func downloadedFrom(link: String, contentMode mode: UIViewContentMode = .scaleAspectFit) {
guard let url = URL(string: link) else { return }
downloadedFrom(url: url, contentMode: mode)
}
}
You will need to set an appropriate placeholder image or nil in prepareForReuse or cellForRowAt