UITableView still slow with blocks - objective-c

Question

so i have a tableView in my app, which basically run the names and images of some user's friends from Facebook.
The problem is that when i drag the tableView up and down, it's slow and not smooth like it should be, although i use block to upload images from Facebook- so it's asynchrony.
Now, after i implement a block for upload images from Facebook, it is run faster then it was before the block- but still not smooth enough.
is anybody know how to deal with it?
here is some of my code:
cellForRowAtIndexPath:
-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
UITableViewCell * cell = [tableView dequeueReusableCellWithIdentifier:#"friendCell"];
if (cell == nil) {
cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault
reuseIdentifier:#"friendCell"];
[friendsTableView reloadData];
}
//set data for user's friends images
NSURL *url;
NSString *stringID;
stringID = [[NSString alloc]initWithFormat:#"https://graph.facebook.com/%#/picture?type=square",facebookFriendsID[indexPath.row] ];
url = [NSURL URLWithString:stringID];
//Calling block function to hendle user's friends images from facebook
[self downloadImageWithURL:url :stringID :cell completionBlock:^(BOOL succeeded, UIImage *image) {
if (succeeded) {
cell.imageView.image = image;
}
}];
//For friends name...
cell.textLabel.text = facebookFriendsName[indexPath.row];
cell.textLabel.font = [UIFont fontWithName:#"Noteworthy" size:17.0f];
[cell setSelectionStyle:UITableViewCellSelectionStyleNone];
cell.imageView.layer.masksToBounds = YES;
cell.imageView.layer.cornerRadius = 25.0;
return cell;
}
And the downloadImage block:
//For upload the images from Facebook asynchrony- using block.
- (void)downloadImageWithURL:(NSURL *)url : (NSString *)string : (UITableViewCell *)cell completionBlock:(void (^)(BOOL succeeded, UIImage *image))completionBlock
{
NSMutableURLRequest *request = [NSMutableURLRequest requestWithURL:url];
[NSURLConnection sendAsynchronousRequest:request
queue:[NSOperationQueue mainQueue]
completionHandler:^(NSURLResponse *response, NSData *data, NSError *error) {
if ( !error )
{
UIImage *image = [UIImage imageWithData:[NSData dataWithContentsOfURL:url]];
completionBlock(YES,image);
} else{
completionBlock(NO,nil);
}
}];
}
Thanks! :)

Answer 1

Your code has 4 problems, all of which are contributing to the slowness:
Delete [friendsTableView reloadData]; - you should never reload the table from inside cellForRowAtIndexPath:.
You should not reference cell from inside your completion block:
[self downloadImageWithURL:url :stringID :cell completionBlock:^(BOOL succeeded, UIImage *image) {
if (succeeded) {
cell.imageView.image = image;
}
}];
By the time your image downloads, cell may have been reused and be displaying different content. This can cause the wrong avatar image to appear. Instead, use indexPath to get the current cell by calling UITableViewCell *currentCell = [tableView cellForRowAtIndexPath:indexPath]; and set the image on that.
You are creating a new network request every time a cell appears. If the user scrolls very fast, you will have lots of simultaneous network requests. You may want to start network requests in scrollViewDidScroll: instead, when the scroll view slows down.
You are not de-duplicating network requests. If a user scrolls up and down really fast, they will generate lots of network requests to the same URL. You need to cache already-downloaded images and use those if the network request has already been made.*
The SDWebImage library has already solved all of these problems; you may simply want to use it instead of reinventing the wheel. At the very least, it's worth reading their code: https://github.com/rs/SDWebImage
* - NSURLCache may be caching the images for you, depending on the server's cache-control headers. But even so, this cache is slow (it caches the NSData representation, not the UIImage representation), and NSURLConnection will not stop you from starting 4 identical requests simultaneously.

Answer 2

Also, pay attention, that you load your image data for second time from main thread in request completion block:
UIImage *image = [UIImage imageWithData:[NSData dataWithContentsOfURL:url]];
you need to use NSData *data parameter from completionHandler - ^(NSURLResponse *response, NSData *data, NSError *error)
UIImage *image = [UIImage imageWithData:data];
BUT, as Aaron Brager noted, you don't need reinventing the wheel instead of using ready solution, like SDWebImage. so, all it matter if only you going to clarify how it works