How to download and store images from an array of URLs using AFNetworking?

Question

I am using "UIImageView+AFNetworking.h", and my goal is to take a NSArray of URL called imageURLArray, download all the pictures, put them in a scroll view with page controls.

To do this, I am downloading the pictures one at a time in the following loop, and have a previously allocated/initialized mutable array downloadImageArray where I stored the downloaded picture:

for (int i = 0; i < [imageURLArray count]; i++){
        NSURL *testURL = [imageURLArray objectAtIndex:i];
        NSURLRequest *testURLRequest = [[NSURLRequest alloc] initWithURL:testURL];
        [placeHolderImageView setImageWithURLRequest:testURLRequest placeholderImage:nil success:^(NSURLRequest *request, NSHTTPURLResponse *response, UIImage *image) {
            NSLog(@"success");
            NSLog(@"The image is %@", image);
            [downloadedImageArray addObject:image]; //! the exception is thrown here - it says the object is NULL
        } failure:^(NSURLRequest *request, NSHTTPURLResponse *response, NSError *error) {
            NSLog(@"failed to download");
        }];
    }
NSLog(@"Count of images is %i", [downloadedImageArray count]) //this always returns "0"

As comment in the line where I add the object to downloadedImageArray, I get the exception that the object added to the mutable array is NULL. I suspect that this is because the image hasn't completed downloading before the next URL is put in place and is being asked to download again. Also, after the loop, when I get a count of downloadedImageArray, the count returns 0.

My questions are:

1. How would be able to ensure that one image has completed downloading before looping through to the next request to download the next image?
2. As a design choice, does it make sense to download all the images first before adding them to my scroll view (the width of each image is set fixed), or does it make more sense to download as they are being scrolled to? If so, how could I implement this? Most of the time imageURLArray has no more than 4 set of URLs.

Thanks!

Answer 1

If you're using the latest version of AFNetworking, to download images you can do this:

NSURLRequest* request = [...]
AFHTTPRequestOperation* op = [[AFHTTPRequestOperation alloc] initWithRequest:request];
op.responseSerializer = [AFImageResponseSerializer serializer];
[op setCompletionBlockWithSuccess:^(AFHTTPRequestOperation* operation, id responseObject){...} failure:^(AFHTTPRequestOperation* operation, NSError* error) {...}];

[op start];

So if you want to loop through an array of URLs and download an image from each, you'd do this (and a word of warning: I haven't tested this):

NSMutableArray* images = [NSMutableArray arrayWithCapacity:imageURLArray.count];
for(int i = 0; i < imageURLArray.count; i++)
    [images addObject:[NSNull null]];
for(int i = 0; i < imageURLArray.count; i++)
{
    NSURL* url = imageURLArray[i];
    NSURLRequest* request = [NSURLRequest requestWithURL:url];
    AFHTTPRequestOperation* op = [[AFHTTPRequestOperation alloc] initWithRequest:request];
    op.responseSerializer = [AFImageResponseSerializer serializer];
    [op setCompletionBlockWithSuccess:^(AFHTTPRequestOperation* operation, id responseObject){
        UIImage* image = responseObject;
        [images replaceObjectAtIndex:i withObject:image];
    } failure:^(AFHTTPRequestOperation* operation, NSError* error) {...}];

    [op start];
}

You fill the images array with NSNulls because images at different indices may load at different times, and if, say image at index 3 loads before image at index 2, you'll get an out of bounds exception if you try to insert it at the proper index.

When these operations finish, each image in the images array will correspond to the URL at the same index in the imageURLArray.

Having said that, most of the time it's better to just download the images you need, when you need them. So I would make your view controller a delegate of your image scroll view, then when scrolling occurs, figure out which UIImageViews have appeared, and call setImageWithURL on them. However, if that's too hard and you don't have an obscene number of really large images, the above should be fine.

Answer 2

Ans. 1 We can make waiting for process completion using NSRunLoop Try this

for (int i = 0; i < [imageURLArray count]; i++)
{
NSURL *testURL = [imageURLArray objectAtIndex:i];
NSURLRequest *testURLRequest = [[NSURLRequest alloc] initWithURL:testURL];
[placeHolderImageView setImageWithURLRequest:testURLRequest placeholderImage:nil success:^(NSURLRequest *request, NSHTTPURLResponse *response, UIImage *image) {
    NSLog(@"success");
    NSLog(@"The image is %@", image);

    while (!image)
        [[NSRunLoop currentRunLoop] runMode:NSDefaultRunLoopMode beforeDate:[NSDate distantFuture]];

    [downloadedImageArray addObject:image]; //! the exception is thrown here - it says the object is NULL
} failure:^(NSURLRequest *request, NSHTTPURLResponse *response, NSError *error) {
    NSLog(@"failed to download");
}];
}
NSLog(@"Count of images is %i", [downloadedImageArray count]);

Now images is not added to array until its not downloaded.

Ans. 2 follow this process for showing images

a. download image

b. add to array

c. add to scroller

do this until all images are not downloaded.

Answer 3

1. if you haven't declared downloadedImageArray with __block then it won't be written to from within your placeHolderImageView setImageWithURLRequest block;

2. consider using table view instead of scroll view so that the downloads happen only when cells are being shown to the user and also consider downloading thumbnails first, whole images later;