Hide image while loading iOS

Question

I'm picking images with UIPicker and when user picks, the download will start. I'm downloading 78 images from my server to create an animation. How can I make it while it's downloading images to hide current image(imageview), and when download finishes to show image(imageview). I tried this but it's not working.

- (void)viewDidLoad

{
 [super viewDidLoad]
 // Load starting image, otherwise screen is blank
  self.radar_1 = [[UIImageView alloc]initWithFrame:CGRectMake(0, 65, self.view.frame.size.width, self.view.frame.size.width-70)];

    radar_1.image = [UIImage animatedImageWithAnimatedGIFURL:[NSURL URLWithString:@"<|SERVER LINK|>"]];

    [self.view addSubview:radar_1];
}

---

- (void)pickerView:(UIPickerView *)pickerView didSelectRow:(NSInteger)row inComponent:(NSInteger)component

{

  if (row == 2) {
        self.radar_1 = [[UIImageView alloc] initWithFrame:CGRectMake(0, 65, self.view.frame.size.width, self.view.frame.size.width-70)];

        self.radar_1.hidden = YES;

        radar_1.animationImages = [NSArray arrayWithObjects:

                                   [UIImage imageWithData:[NSData dataWithContentsOfURL:[NSURL URLWithString:@"<|SERVER LINK|> "]]],

                                   [UIImage imageWithData:[NSData dataWithContentsOfURL:[NSURL URLWithString:@"<|SERVER LINK|> "]]],

                                   [UIImage imageWithData:[NSData dataWithContentsOfURL:[NSURL URLWithString:@"<|SERVER LINK|>"]]],

                                   [UIImage imageWithData:[NSData dataWithContentsOfURL:[NSURL URLWithString:@"<|SERVER LINK|>"]]],
{...} // Doing the same 77 times...

        radar_1.hidden = NO;

        radar_1.animationDuration = 20.0f;

        radar_1.animationRepeatCount = 0;

        [radar_1 startAnimating];

        [self.view addSubview: radar_1];
}

Answer 1

Downloading 70 images from a NSURL synchronously is probably not the best idea, from a user experience standpoint. Is there a reason you cannot put all the images together in a Sprite Sheet and download a single image, and then process it on the client end to display your animation?

If you really do need to go grab 70 images, it would be best to do that asynchronously so the UI remains responsive. Here is an example of simple Async Image load that could be used:

    - (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);
                                }
                           }];
}

You can hold a counter variable and iterate through your image requests calling the method above. When each is complete you can tick off another successful image request. When you have them all, then you can construct that animation you are making.

While that is occurring, you can add an ActivityIndicator to your view to let the user know stuff is happening while they are waiting.

Hope that helps some.