在表格视图中滚动时图像重复单元格

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
}