How to download 100 images from server in Objective-C using NSURLSession - ios

Question

I am making an app..
I need to download many pictures from a server, but I don't know how to do
previously am doing this by following some articles
currently am facing some issues
when scrolling images flicker and change all the time. When scrolling back up fast, all images are wrong. What can I do about that?
- (void)downloadImageWithURL:(NSURL *)url 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 alloc] initWithData:data];
completionBlock(YES,image);
} else{
completionBlock(NO,nil);
}
}];
}
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
static NSString *cellIdentifier = #"venue";
UITableViewCell *cell = [self.tableView dequeueReusableCellWithIdentifier:cellIdentifier forIndexPath:indexPath];
if (!cell) {
cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:cellIdentifier];
}
Venue *venue = ((Venue * )self.venues[indexPath.row]);
if (venue.userImage) {
cell.imageView.image = venue.image;
} else {
// set default user image while image is being downloaded
cell.imageView.image = [UIImage imageNamed:#"default.png"];
// download the image asynchronously
[self downloadImageWithURL:venue.url completionBlock:^(BOOL succeeded, UIImage *image) {
if (succeeded) {
// change the image in the cell
cell.imageView.image = image;
// cache the image for use later (when scrolling up)
venue.image = image;
}
}];
}
}
**Any best way suggestions **

Answer 1

I see a few issues in your code so let me first give an example of minimum you need:
- (void)downloadImageFrom:(NSURL *)path completion:(void (^)(UIImage *image))completionBlock {
dispatch_queue_t queue = dispatch_queue_create("Image Download", 0);
dispatch_async(queue, ^{
NSData *data = [[NSData alloc] initWithContentsOfURL:path];
dispatch_async(dispatch_get_main_queue(), ^{
if(data) {
completionBlock([[UIImage alloc] initWithData:data]);
} else {
completionBlock(nil);
}
});
});
}
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
MyTableViewCell *cell = ...; // Create my own cell
NSString *imageURL = ...; // Get from my model
cell.imageURLString = imageURL;
[self downloadImageFrom:[NSURL URLWithString:imageURL] completion:^(UIImage *image) {
if(cell.imageURLString == imageURL) {
cell.imageView.image = image;
}
}];
return cell;
}
First of all when downloading (no matter what you use) ensure you are on correct thread. I used the easiest tool to download remote image which is using NSData and will work great as long your request don't need extra data like credentials. There is no reason for you to change it but ensure you call completion on your main thread.
Next what you are experiencing is the issue with multithreading plus cell dequeuing. In table view a same cell will be reused. When you scroll down a cell that travels up off your screen will appear at the bottom. This is to gain performance.
Now because you scroll up and down and your images load asynchronously the completion block if (succeeded) { may be called for what it seems to be an incorrect cell. What you need to do is check if the call is still valid.
So you should subclass your cell and add at least some identifier like imageURLString. You set that before you make the call to get the image and then check again on completion if the cell identifier is still the same. If it is not then your cell has been reused and the image downloaded is to be thrown away.
That also implies that you should create some sort of image caching. That way a thrown-away image is not really thrown away but is cached and if the same cell should appear the download will not occur again.