Swift Json Tableview落后

Question

I have a problem. I have this code in Swift but when i scrolling in the tableview its very laggy and i dont know what the problem is..?? Its downloading image data that is like 20mb each (i think)..

Thanks!

func downloadJsonWithTask() {

    let url = NSURL(string: urlString)

    var downloadTask = URLRequest(url: (url as? URL)!, cachePolicy: URLRequest.CachePolicy.reloadIgnoringCacheData, timeoutInterval: 200)

    downloadTask.httpMethod = "GET"

    URLSession.shared.dataTask(with: downloadTask, completionHandler: {(data, response, error) -> Void in

        let jsonData = try? JSONSerialization.jsonObject(with: data!, options: .allowFragments)

        print(jsonData)

    }).resume()
}

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCell(withIdentifier: "cell") as! TableViewCell
    cell.nameLabel.text = nameArray[indexPath.row]
    cell.dobLabel.text = dobArray[indexPath.row]

    let imgURL = NSURL(string: imgURLArray[indexPath.row])

    if imgURL != nil {
        let data = NSData(contentsOf: (imgURL as? URL)!)
        cell.imgView.image = UIImage(data: data as! Data)
    }

    return cell
}

///for showing next detailed screen with the downloaded info
func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {

    let vc = self.storyboard?.instantiateViewController(withIdentifier: "DetailViewController") as! DetailViewController
    vc.imageString = imgURLArray[indexPath.row]
    vc.imageString2 = imgURL2Array[indexPath.row]
    vc.imageString3 = imgURL3Array[indexPath.row]
    vc.imageString4 = imgURL4Array[indexPath.row]
    vc.imageString5 = imgURL5Array[indexPath.row]
    vc.imageString6 = imgURL6Array[indexPath.row]
    vc.nameString = nameArray[indexPath.row]
    vc.dobString = dobArray[indexPath.row]
    vc.txtString = txtArray[indexPath.row]
    vc.contactString = contactArray[indexPath.row]

    self.navigationController?.pushViewController(vc, animated: true)
}

Answer 1

The problem because of this line

 let data = NSData(contentsOf: (imgURL as? URL)!)

it blocks the main thread , you have to run it in other queue , beside it re downloads the image every scroll ( no cache ) so it's better to use SDWebImage

cell.imgView.sd_setImage(with: URL(string: "http://www.example.com/path/to/image.jpg"), placeholderImage: UIImage(named: "placeholder.png"))

Answer 2

This will always lag. Your requesting image in main thread.

Try to use SDWebCache Library : https://github.com/rs/SDWebImage .

1 : It will cachce intially image and will avoid multiple HTTP requests.

2 : Works in background so will not affect the main thread.

Use method imageview.sd_imageFromUrl(URL(....)!)

Answer 3

It's very clear. You asking the Image data from main thread. Whenever you perform timeconsuming operation on the Main Thread, then the App will be laggy.

let data = NSData(contentsOf: (imgURL as? URL)!)

The best solution that worked for me so far is using AlamofireImage or Kingfisher. That needs you to learn about adding library into your project. Try to use Cocoapods for convenience.

I assume you were able to use Cocoapods here.

In case you want to caching support, Kingfisher comes first. Caching means you will need to make Request to server only for the first time or if something changed. It will save your resources etc. All you need to do is importing Kingfisher module in ViewController then it automatically extend UIImageView capability with Kingfisher extension kf

Here is the sample code

//ViewController.swift
import Kingfisher

// Your cellForRowAt
...
if let url = URL(string: imgURLArray[indexPath.row]) {
    cell.imgView.kf.setImage(with: url)
}
...

Kingfisher will perform caching strategy under the hood so you can focus on the app.

In order to put default image which will be very usefull to inform user about the image, (user expects there is something in blank white box -- UIImageView while image is nil -- in their screen isn't?) Kingfisher helps you with placeholder

let defaultImage = UIImage(named: "default_img")!
cell.imgView.kf.setImage(with: url, placeholder: defaultImage)

Get the complete insight about Kingfisher here Kingfisher's Github Page