UITableView is not smoothly when using downloading images

Question

I am new in IOS development using Swift. I created 1 UITableView and displaying images after downloading data. But it is not smooth and some time images are displaying in wrong place when i am scrolling.

I am using AlamofireImage library for image downloading and displaying. Is there any fast library?

override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {

    let cell:HomePageCell = tableView.dequeueReusableCell(withIdentifier: "HomePage", for: indexPath) as! HomePageCell

    cell.configure( homeData[0], row: indexPath, screenSize: screenSize,
                    hometableview: self.homeTableView);

    return cell
}


import UIKit
import Alamofire
import AlamofireImage

class HomePageCell: UITableViewCell {



@IBOutlet weak var bannerImage: UIImageView!

func configure(_ homeData: HomeRequest, row: IndexPath, screenSize: CGRect, hometableview: UITableView) {


   let callData = homeData.banner_lead_stories[(row as NSIndexPath).row]
   let url = Constants.TEMP_IMAGE_API_URL + callData.lead_story[0].bg_image_mobile;


    if( !callData.lead_story[0].bg_image_mobile.isEmpty ) {

        if bannerImage?.image == nil {

            let range = url.range(of: "?", options: .backwards)?.lowerBound
            let u = url.substring(to: range!)

            Alamofire.request(u).responseImage { response in
                debugPrint(response)

                //print(response.request)
                // print(response.response)
                // debugPrint(response.result)

                if let image = response.result.value {
                    //   print("image downloaded: \(image)")

                    self.bannerImage.image = image;

                    self.bannerImage.frame  = CGRect(x: 0, y: 0, width: Int(screenSize.width), height: Int(screenSize.width/1.4))

                }
            }

        }

    } else {
        self.bannerImage.image = nil;
    }
}

 }

Answer 1

It can be not smooth, because you need to cache your images and make a downloading process not in main thread(read about GCD). For caching you can go two ways (atleast):

1) Make your own array of images where they will be cached

2) Use KingFisher for example click. It will cache your images. For example:

yourImageView.kf.setImage(with: URL) // next time, when you will use image with this URL, it will be taken from cache.

Hope it helps