images repeating cells when scrolled in tableview - ios

Question

images are not showing properly in tableview , I have two Json Api (Primary/high) school. I can append the Both Json api Data and display into tableview,
tableview working fine it's showing both(primary/high) school data. when I can scroll the tableview images are jumping and images loading very slow in image view at tableview.
Before scrolling tableview its showing like this
After scrolling the tableview it's shows like this
after scrolling images are jumping,
this is the code
var kidsdata = [KidDetails]()
func getprimarydata(_firsturl: String,firstid:String,updatedate:String)
{
if errorCode == "0" {
if let kid_list = jsonData["students"] as? NSArray {
self.kidsdata.removeAll()
for i in 0 ..< kid_list.count {
if let kid = kid_list[i] as? NSDictionary {
let imageURL = url+"/images/" + String(describing: kid["photo"]!)
self.kidsdata.append(KidDetails(
name:kid["name"] as? String,
photo : (imageURL),
standard: ((kid["standard"] as? String)! + "std" + " " + (kid["section"] as? String)! + " section ")
))}}}}
}
func gethighdata(_secondurl:String ,secondid:String,updatedate:String)
{
if errorCode == "0" {
if let kid_list = jsonData["students"] as? NSArray {
for i in 0 ..< kid_list.count {
if let kid = kid_list[i] as? NSDictionary {
let imageURL = url+"/images/" + String(describing: kid["photo"]!)
self.kidsdata.append(KidDetails(
name:kid["name"] as? String,
photo : (imageURL),
standard: ((kid["standard"] as? String)! + "th" + " " + (kid["section"] as? String)! + " section ")
)
)
}
}
self.do_table_refresh()
}
}
}
func do_table_refresh()
{
DispatchQueue.main.async(execute: {
self.TableView.reloadData()
return
})
}
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell =
tableView.dequeueReusableCell(
withIdentifier: "cell", for: indexPath) as! DataTableViewCell
cell.selectionStyle = .none
cell.ProfileImage?.image = nil
let row = (indexPath as NSIndexPath).row
let kid = kidsdata[row] as KidDetails
cell.NameLabel.text = kid.name
cell.ProfileImage.image = UIImage(named: "profile_pic")
cell.ProfileImage.downloadImageFrom(link:kid.photo!, contentMode: UIViewContentMode.scaleAspectFill)
cell.ClassNameLabel.text = kid.standard
return cell
}
where I did mistake pls help me....!

Answer 1

AlamofireImage handles this very well. https://github.com/Alamofire/AlamofireImage
import AlamofireImage
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath) as! DataTableViewCell
cell.selectionStyle = .none
let kid = kidsdata[indexPath.row] as KidDetails
cell.NameLabel.text = kid.name
cell.ClassNameLabel.text = kid.standard
// assuming cell.ProfileImage is a UIImageView
cell.ProfileImage.image = nil
let frame = CGSize(width: 50, height: 50)
let filter = AspectScaledToFillSizeWithRoundedCornersFilter(size: frame, radius: 5.0)
cell.ProfileImage.af_setImage(withURL: urlToImage, placeholderImage: nil, filter: filter,
imageTransition: .crossDissolve(0.3), runImageTransitionIfCached: false)
return cell
}

Answer 2

All we need to do is use the prepareForReuse() function. As discussed in this medium article, This function is called before cell reuse, letting you cancel current requests and perform a reset.
override func prepareForReuse() {
super.prepareForReuse()
ProfileImage.image = nil
}