Images loaded from URL changing on scroll in UITableView - ios

Question

I currently have a tableView being loaded from Firebase. This content includes a picture which, when the user scrolls, will change until it settles on its final image. I would assume this would be assigning an image to each cell before it can succesfully load each cell, but have not been able to come up with a work around.
The current code that I have to populate the tableView is as follows:
TableView
import UIKit
import FirebaseAuth
import FirebaseStorage
class Articles: UITableViewController {
var vcType:String = "Home"
var rooms = [Room]()
var articleCell = ArticlesCell()
#IBOutlet weak var menuButton: UIBarButtonItem!
override func viewDidLoad() {
super.viewDidLoad()
if self.vcType == "Home"
{
self.rooms += ArticlesManager.sharedClient.rooms
}
else
{
if let obj = ArticlesManager.sharedClient.catRooms[self.vcType.lowercased()] //as? [Room]
{
self.rooms += obj
}
}
self.tableView.reloadData()
ArticlesManager.sharedClient.blockValueChangeInRoomArray = {
newRoom in
if self.vcType == "Home"
{
self.rooms.append(newRoom)
self.rooms.sort(by: {
if $0.created_Date == nil
{
return false
}
if $1.created_Date == nil
{
return true
}
return $0.created_Date.compare($1.created_Date) == ComparisonResult.orderedDescending
})
}
else
{
if self.vcType.lowercased() == newRoom.category
{
self.rooms.append(newRoom)
self.rooms.sort(by: {
if $0.created_Date == nil
{
return false
}
if $1.created_Date == nil
{
return true
}
return $0.created_Date.compare($1.created_Date) == ComparisonResult.orderedDescending
})
self.tableView.reloadData()
}
}
}
}
override func numberOfSections(in tableView: UITableView) -> Int {
return 1
}
override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return rooms.count
}
override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
if (indexPath as NSIndexPath).row == 0 {
let cell2 = tableView.dequeueReusableCell(withIdentifier: "featured", for: indexPath) as! featuredCell
let room = rooms[(indexPath as NSIndexPath).row]
cell2.configureCell(room)
return cell2
} else {
let cell = tableView.dequeueReusableCell(withIdentifier: "Cell", for: indexPath) as! ArticlesCell
let room = rooms[(indexPath as NSIndexPath).row]
cell.configureCell(room)
return cell
}
Data
import Foundation
import Firebase
import FirebaseAuth
let roomRef = FIRDatabase.database().reference()
class Data {
static let dataService = Data()
fileprivate var _BASE_REF = roomRef
fileprivate var _ROOM_REF_ = roomRef.child("rooms")
fileprivate var _BASE_REF2 = roomRef
fileprivate var _ROOM_REF_2 = roomRef.child("contents")
var BASE_REF: FIRDatabaseReference {
return _BASE_REF
}
var ROOM_REF: FIRDatabaseReference {
return _ROOM_REF_
}
var storageRef: FIRStorageReference {
return FIRStorage.storage().reference()
}
var fileURL: String!
func fetchData(_ callback: #escaping (Room) -> ()) {
Data.dataService.ROOM_REF.observe(.childAdded, with: { (snapshot) in
print("snapshot.value - \(snapshot))")
let room = Room(key: snapshot.key, snapshot: snapshot.value as! Dictionary<String, AnyObject>)
callback(room)
})
}
}
TableViewCell
import UIKit
import FirebaseStorage
class featuredCell: UITableViewCell {
#IBOutlet weak var featuredImage: UIImageView!
#IBOutlet weak var featuredTitle: UITextView!
#IBOutlet weak var featuredAuthor: UITextField!
#IBOutlet weak var featuredDate: UITextField!
#IBOutlet weak var featuredContent: UITextView!
class var defaultHeight: CGFloat { get { return ((UIScreen.main.fixedCoordinateSpace.bounds.height - 64) / 5) * 3}}
func configureCell(_ room: Room) {
self.featuredTitle.text = room.title
self.featuredDate.text = room.date
self.featuredAuthor.text = room.author
self.featuredContent.text = room.story
if let imageURL = room.thumbnail {
if imageURL.hasPrefix("gs://") {
FIRStorage.storage().reference(forURL: imageURL).data(withMaxSize: INT64_MAX, completion: { (data, error) in
if let error = error {
print("Error downloading: \(error)")
return
}
self.featuredImage.image = UIImage.init(data: data!)
})
} else if let url = URL(string: imageURL), let data = try? Foundation.Data(contentsOf: url) {
self.featuredImage.image = UIImage.init(data: data)
}
}
}
}
Thank you for your help!

Answer 1

This is a normal behavior of tableviews when working with async downloading during tableview load or scrolling. You've to just clear your image before loading and keep the images datas in Cache when they've downloaded once for a efficient network charge. If you do not use caching, tableview always "re-download" the image when the cell is going to reused. Please see the example;
public func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: "cell") as! TableViewCell
let urle = self.filteredFlats[indexPath.row].flatThumbnailImage?.imageDownloadURL
if let url = urle
{
cell.imgv.image = nil
if let imagefromCache = imageCache.object(forKey: url as AnyObject) as? UIImage
{
cell.imgv.image = imagefromCache
}
else
{
cell.imgv.image = nil
let urlURL = URL(string: (url))
URLSession.shared.dataTask(with: urlURL!, completionHandler: { (data, response, error) in
if error != nil
{
print(error.debugDescription)
return
}
DispatchQueue.main.async {
let imagetoCache = UIImage(data:data!)
self.imageCache.setObject(imagetoCache!, forKey: url as AnyObject)
cell.imgv.image = imagetoCache
}
}).resume()
}
}
return cell
}
this code is copied from my project. So i'm caching the image when it is already downloaded. Also i do not redownload it when cell is reused. Just checking if it is cached or not. So you can use this apporach for a behaviour that satisfy your requirements.