Swift - UITableView lags with images

Question

My problem is when I scroll down my UITableView, it looks too laggy. The images grab from facebook.

My code

override func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {

        let cell = tableView.dequeueReusableCellWithIdentifier("UserCell", forIndexPath: indexPath) as UITableViewCell

        let user = users[indexPath.row] as User //2

        if let nameLabel = cell.viewWithTag(100) as? UILabel { //3
            nameLabel.text = user.name
        }

        if let dateCreatedLabel = cell.viewWithTag(101) as? UILabel {
        dateCreatedLabel.text = user.distance
        }

        if let profilePictureView = cell.viewWithTag(103) as? UIImageView {
            if let url = NSURL(string: "https://graph.facebook.com/\(user.profilePhoto)/picture?type=large") {
                if let data = NSData(contentsOfURL: url){
                    profilePictureView.contentMode = UIViewContentMode.ScaleAspectFit
                    profilePictureView.image = UIImage(data: data)
                }
            }
        }
        return cell
    }

Please advice how to make it smooth.

Look for questions and answers about loading images in background. — Matteo Piombo, Feb 07 '15 at 09:44
http://stackoverflow.com/questions/24231680/swift-loading-image-from-url — Dharmesh Kheni, Feb 07 '15 at 09:56

m8labs · Answer 1 · 2015-02-07T09:53:55.233

4

OMG, never do like this not only in scrolling controls, but in general UI also:

data = NSData(contentsOfURL: url)

Thats why you table lags, and you lucky enougth with fast internet. If you connection will be slow, you app will hang, may be forever. ALWAYS do network asyncronously!

Also, when you make you network async, your tableView will still lag here:

UIImage(data: data)

And even here if you have many controls in your cell:

cell.viewWithTag(101)

So, use some library to download images, this is surprisingly not so easy task as it seems to be, you will not do it right yourself according to you experience (as I can see it).

Make separate class for you cell and use IB to connect outlets.

Try AFNetworking, it has category for UIImageView to download images.

edited Feb 07 '15 at 09:53

answered Feb 07 '15 at 09:48

m8labs

3,671
2
30
32

So how i can fix this problem? – Nurdin Feb 07 '15 at 09:52
@Dato'MohammadNurdin see my updated answer, you code with swift, not so many libraries for it now I think (I code with objective-c and there are couple of them, try to adopt AFNetworking f.e.) – m8labs Feb 07 '15 at 09:56
1

@Dato'MohammadNurdin Yes, this is from author of AFNetworking, so it's exactly what you need. – m8labs Feb 07 '15 at 12:18

score 3 · Accepted Answer · answered Feb 25 '15 at 09:10

I already found the answer. Use Haneke instead NSData.

import Haneke

/* .. */

override func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {

        let cell = tableView.dequeueReusableCellWithIdentifier("UserCell", forIndexPath: indexPath) as UITableViewCell

        let user = users[indexPath.row] as User //2

        if let nameLabel = cell.viewWithTag(100) as? UILabel { //3
            nameLabel.text = user.name
        }

        if let dateCreatedLabel = cell.viewWithTag(101) as? UILabel {
        dateCreatedLabel.text = user.distance
        }

        if let profilePictureView = cell.viewWithTag(103) as? UIImageView {
            if let url = NSURL(string: "https://graph.facebook.com/\(user.profilePhoto)/picture?type=large") {
                    profilePictureView.contentMode = UIViewContentMode.ScaleAspectFit
                    profilePictureView.hnk_setImageFromURL(url!)

            }
        }
        return cell
    }

Swift - UITableView lags with images

2 Answers2