Pfthb

I have a TableView with ImageViews inside each cell. I want the images to get loaded once and remain like that but it seems that the images get loaded (downloaded, I'm getting them from an external API) as they get into visible area for user. It seems like a lazy load or something like that and I would like to disable it because if I scroll down then come back up most of the images get misplaced.

TableViewController.swift

cell?.mainChampImageView.image = businessLayer.getChampionThumbnailImage(championId: mainChampion.key)

BusinessLayer.swift

func getChampionThumbnailImage (championId: Int) -> UIImage 
 return dataLayerRiot.getChampionThumbnailImage(championId: championId)
 

DataLayerRiot.swift

func getChampionThumbnailImage (championId: Int) -> UIImage 
 var image: UIImage!

 let urlString = ApiHelper.getChampionThumbnailImageApiLink(championId: championId)
 let url = URL(string: urlString)
 let session = URLSession.shared

 let semaphore = DispatchSemaphore(value: 0)

 session.dataTask(with: url!) (data, response, error) in
 if error != nil 
 print("ERROR")
 semaphore.signal()
 
 else 
 image = UIImage(data: data!)!
 semaphore.signal()
 
 .resume()

 semaphore.wait()
 session.finishTasksAndInvalidate()

 return image
 

Anyone know how to disable them loading as they get into visible area for the user and just have them "stored"?

You should save a task at memory like:

let task = = session.dataTask() 

And after you can cancel it anywhere by:

task.cancel()

Alternatively, if the object session is a URLSession instance, you can cancel it by:

session.invalidateAndCancel()

Try SDWebImage for lazy loading the images in the UITableViewCell or UICollectionViewCell. Install it through cocoapods into your project.

It is an asynchronous memory + disk image caching with automatic cache expiration handling.

https://github.com/SDWebImage/SDWebImage

Code:

let urlString = ApiHelper.getChampionThumbnailImageApiLink(championId: championId)
let url = URL(string: urlString)
cell?.mainChampImageView.sd_setImage(with: url, placeholderImage: UIImage(named: "placeholder.png"))

It sounds like you could benefit from doing some image caching. There are multiple ways to go about doing so, but from your example, it doesn't look like you need to go through the trouble of adding an entire library to do so. You can do it in a simple manner using NSCache.

I created a class called ImageCache, and in this case it is a singleton, so that the cache is accessible throughout the entire application.

import UIKit

class ImageCache: NSObject 
 static let sharedImageCache = ImageCache()

 // Initialize cache, specifying that your key type is AnyObject
 // and your value type is AnyObject. This is because NSCache requires 
 // class types, not value types so we can't use <URL, UIImage>

 let imageCache = NSCache<AnyObject, AnyObject>()

 // Here we store the image, with the url as the key
 func add(image: UIImage, for url: URL) 
 // we cast url as AnyObject because URL is not a class type, it's a value type
 imageCache.setObject(image, forKey: url as AnyObject)
 


 // This allows us to access the image from cache with the URL as the key
 // (e.g. cache[URL])
 func fetchImage(for url: URL) -> UIImage? 
 var image: UIImage?

 // Casting url for the same reason as before, but we also want the result
 // as an image, so we cast that as well
 image = imageCache.object(forKey: url as AnyObject) as? UIImage
 return image
 

So now we have some relatively simple caching in place. Now for how to use it:

func getChampionThumbnailImage (championId: Int) -> UIImage 
 var image: UIImage!

 let urlString = ApiHelper.getChampionThumbnailImageApiLink(championId: championId)
 let url = URL(string: urlString)

 // Before, downloading the image, we check the cache to see if it exists and is stored.
 // If so, we can grab that image from the cache and avoid downloading it again.
 if let cachedImage = ImageCache.sharedImageCache.fetchImage(for: url) 
 image = cachedImage
 return image
 

 let session = URLSession.shared

 let semaphore = DispatchSemaphore(value: 0)

 session.dataTask(with: url!) (data, response, error) in
 if error != nil 
 print("ERROR")
 semaphore.signal()
 
 else 
 image = UIImage(data: data!)!
 // Once the image is successfully downloaded the first time, add it to 
 // the cache for later retrieval
 ImageCache.sharedImageCache.add(image: image, for: url!)
 semaphore.signal()
 
 .resume()

 semaphore.wait()
 session.finishTasksAndInvalidate()

 return image

The reason the images are re-downloading is because a table view doesn't have unlimited cells. What happens is, as you scroll down, the cells that go off the screen are then recycled and re-used, so when you scroll back up, the images have to be grabbed again because they've been emptied out.

You can avoid downloading the images again by implementing caching.

Another way you can avoid having incorrect images is setting your image view to nil before you re-download the image. For example:

cell?.mainChampImageView = nil
cell?.mainChampImageView.image = businessLayer.getChampionThumbnailImage(championId: mainChampion.key)

All of the above, along with making sure that you are dequeuing cells properly should address your issue.