Table view scroll lagging when using SDWebImage

Question

I am loading some images from the internet in a table view inside cellForRowAtIndexPath. Here is my code:

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    static NSString *MyIdentifier = @"ArticleCell";
    ArticleCell *cell = [tableView dequeueReusableCellWithIdentifier:MyIdentifier];
    Article *article = [parser items][indexPath.row];

    cell.title.text = article.title;
    cell.newsDescription.text = article.description;
    [cell.image setImageWithURL:[NSURL URLWithString:article.image]];

    return cell;
}

My problem is that even if I use SDWebImage, when I scroll down, my app still lags. Here is some screenshots from Instruments:

Answer 1

It looks like even though the download of the image is performed in a background thread, the work with the image data is done in the main thread, thus it blocks your application. You could try the asynchronous image downloader provided by SDWebImage.

[SDWebImageDownloader.sharedDownloader downloadImageWithURL:imageURL
                                                    options:0
                                                   progress:^(NSUInteger receivedSize, long long expectedSize)
                                                   {
                                                       // progression tracking code
                                                   }
                                                   completed:^(UIImage *image, NSData *data, NSError *error, BOOL finished)
                                                   {
                                                       if (image && finished)
                                                       {
                                                           // do something with image
                                                       }
                                                   }
];

In your method it should look like:

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    static NSString *MyIdentifier = @"ArticleCell";
    ArticleCell *cell = [tableView dequeueReusableCellWithIdentifier:MyIdentifier];
    Article *article = [parser items][indexPath.row];

    cell.title.text = article.title;
    cell.tag = indexPath.row;
    cell.newsDescription.text = article.description;
    [SDWebImageDownloader.sharedDownloader downloadImageWithURL:imageURL
                                                        options:0
                                                       progress:nil
                                                      completed:^(UIImage *image, NSData *data, NSError *error, BOOL finished)
     {
         if (cell.tag == indexPath.row && image && finished)
         {
            dispatch_async(dispatch_get_main_queue(), ^(){
               cell.image = image;
            });

         }
     }];

    return cell;
}

Answer 2

Download the image on a separate thread, like so:

NSURLRequest *request = [NSURLRequest requestWithURL:yourURL];
                        [NSURLConnection sendAsynchronousRequest:request queue:[NSOperationQueue mainQueue] completionHandler:^(NSURLResponse *response, NSData *data, NSError *error) {
                            if ( data )
                            {
                                UIImage *image = [[UIImage alloc] initWithData:data];
                                [cell.image setImage:image];
                            }
                        }];

Answer 3

This probably has less to do with network activity and more to do with your image sizes. Resizing images, especially for non-integer multipliers, is expensive. If your images are significantly larger than the view you are putting them into, you need to resize and cache them in a background thread, and reference the cached copy from your view.

To confirm if this is your issue, manually download all the images and reference the local copy. If I am correct, your UITableView will still lag the same way.

Answer 4

You have to load asynchronously from server so your tableView will scrolling smoothly.

Please check below answer you will be able to solve your problem.

https://stackoverflow.com/a/15331306/1713478

Answer 5

Check you images, check the types and size and more important: Is one or more image broken by its file format in any way? Filesize too big, irregular (to large) bounds?

Try to open and re-save suspiciously image files with an image editor, to be sure the internal file format is OK.