Delay loading images in UIImageView

Question

I'm trying to loop through some images in a single UIImageView when I tap a button. The image must disappear 0.1 seconds after the button is pressed. Here's the code:

int tapCount = 0;

UIImage *image0 = [UIImage imageNamed:@"0.jpg"];
UIImage *image1 = [UIImage imageNamed:@"1.jpg"];
UIImage *image2 = [UIImage imageNamed:@"2.jpg"];
imagesArray = [[NSArray alloc] initWithObjects:image0, image1, image2, nil];


-(IBAction)backgroundButton:(id)sender{

  self.myImageView.image = [imagesArray objectAtIndex:tapCount%3];
  tapCount++;
  [self performSelector:@selector(eraseImage) withObject:self afterDelay:0.1];   
}

-(void)eraseImage{

  self.myImageView.image = nil;
}

The problem is that the images don't appear until I've completed one entire loop (at the 4th tap). I'm guessing that somehow I must initialize the images in the UIImageView because it takes some time between the tapping and the image appearing, and since it disappears after 0.1 seconds...it doesn't show at all.

I've tried loading them inside viewDidLoad like this:

for(int i = 0; i<[imagesArray count]; i++){
  self.myImageView.image = [imagesArray objectAtIndex : i];
}

But it only works with the last image that loads (image2 in this case).

Should I loop between different UIImageView instead of looping through different UIImage inside a single UIImageView?

Any other hints?

What are the images and how big are they? Creating a `UIImage` doesn't actually load the image data (you need to render it to a context for that to happen). — Wain, Feb 10 '14 at 16:09
The images are jpg between 1MB and 3MB. 1024x768 since the must be fullscreen in an iPad. How could I load them before? — guardabrazo, Feb 10 '14 at 16:15
idk if this is how you have your code, but the i shouldn't have the = in front of it; it should be [imagesArray objectAtIndex:i]; — user2277872, Feb 10 '14 at 16:19

score 2 · Answer 1 · edited May 23 '17 at 12:28

Creating a UIImage doesn't actually load the image data (you need to render it to a context for that to happen). So, if your images are large then you could be hiding them before they are actually rendered to the screen. You won't be able to hold many images in memory at the same time, but you can force the image data to be loaded by creating a context and drawing the image into it (which can be done in the background, using CGContextDrawImage).

There are a few 3rd party bits of code which do this, like this or check this discussion.

score 1 · Answer 2 · answered Feb 10 '14 at 18:44

1

Use the animationImages and animationDuration property of the UIImageView

https://developer.apple.com/library/ios/documentation/uikit/reference/UIImageView_Class/Reference/Reference.html#//apple_ref/occ/instp/UIImageView/animationImages

answered Feb 10 '14 at 18:44

rist

578
2
9

Yes, I was going to say this. I can't believe it wasn't suggested by other people. Wish I could +1 again. – Fogmeister Feb 11 '14 at 09:59

Mika · Answer 3 · 2014-02-10T16:53:47.980

0

I think there is a much simpler way to achieve that animation you are going for. Try the following code:

-(IBAction)backgroundButton:(id)sender{


  [UIView animateWithDuration:0.2
                        delay:nil 
                      options:UIViewAnimationCurveEaseIn 
                   animations:^{
                        self.myImageView.image = [imagesArray objectAtIndex:tapCount%3];
                        self.myImageView.image = nil;

                       } 
             completion:nil
   ];

  tapCount++;

  if (tapCount == 2) {
       tapCount = 0;
  }

 }

edited Feb 10 '14 at 16:53

answered Feb 10 '14 at 16:18

Mika

5,807
6
38
83

Using this animation the image doesn't disappear after 0.1 seconds. I've tried adding `completion:^(BOOL finished) { self.myImageView.image = nil; }` But this way the image does't even appear. – guardabrazo Feb 10 '14 at 16:45
So after the user clicks you want the image to appear for .1 seconds and then disappear? – Mika Feb 10 '14 at 16:51
Yes! That's exactly what I want. – guardabrazo Feb 10 '14 at 16:53
I updated my answer. I never tried but it should work. – Mika Feb 10 '14 at 16:54
Well...it's not working for me. The image doesn't even appear in the first place. By the way... `delay` should be `0` instead of `nil` and `options` should be `UIViewAnimationOptionCurveEaseIn` right? – guardabrazo Feb 10 '14 at 16:59

score 0 · Answer 4 · answered Feb 11 '14 at 09:56

I finally managed to work this around using this solution:

First I preload all the images in the background thread

-(void)preload:(UIImage *)image{

CGImageRef ref = image.CGImage;
size_t width = CGImageGetWidth(ref);
size_t height = CGImageGetHeight(ref);
CGColorSpaceRef space = CGColorSpaceCreateDeviceRGB();
CGContextRef context = CGBitmapContextCreate(NULL, width, height, 8, width * 4, space, kCGBitmapAlphaInfoMask & kCGImageAlphaPremultipliedFirst);
CGColorSpaceRelease(space);
CGContextDrawImage(context, CGRectMake(0, 0, width, height), ref);
CGContextRelease(context);
}

Then I execute the same action I had in the beginning:

-(IBAction)backgroundButton:(id)sender{

   self.myImageView.image = [imagesArray objectAtIndex:tapCount%3];
   tapCount++;
   [self performSelector:@selector(eraseImage) withObject:self afterDelay:0.1];   
}

-(void)eraseImage{

  self.myImageView.image = nil;
}

Delay loading images in UIImageView

4 Answers4