Loading multiple images in same UIImageView flashe

Question

The goal is to render different images using the same UIImageView. Each time the user taps a different button, a different image gets rendered in the UIImageView.

Example user flow:

• User taps button for image 1. UIImageView appears loaded with image 1.
• User taps different button to close UIImageView. UIImageView gets hidden.
• User taps different button for image 2. UIImageView is loaded with image 2 then unhidden. Image 1 appears for a moment before image 2 appears.

This works the first time. However, each subsequent time shows a glimpse of the prior image for a split second before showing the second image, causing a flickering user experience. For example, when viewing the second image, you see the first image for a brief moment before the second one appears on screen.

How can you fix subsequent loads so the prior image doesn't appear?

This function loads a new image into a UIImageView:

private func loadImage(targetView: UIImageView, imageURL: String) {
    // Get file path to <imageURL>
    let imageURL = getFilePath(imageURL)

    // Create image & show in <targetView>
    if let image = UIImage(named: imageURL) {
        targetView.contentMode = .ScaleAspectFill
        targetView.image = image
        targetView.clipsToBounds = true
        targetView.hidden = false
    } else {
        print("Error rendering image for \(imageURL)")
    }
}

Answer 1

The solution was to reset the UIImageView upon closing so the second image is essentially reloaded into a fresh UIImageView.

Answer 2

I am not exactly sure what you are trying to accomplish, but this certainly should get you on your way to a solution. I tried to make it as deatailed as possible, but I can answer any questions you have.

class RandomImage: UITableViewCell {

@IBOutlet weak var ImageView: UIImageView!
@IBOutlet weak var ChangingButton: UIButton!

override func awakeFromNib() {
    super.awakeFromNib()
    // Initialization code

    self.ChangingButton.setTitle("Change", forState: UIControlState.Normal)
}


@IBAction func changeImageTapped(sender: UIButton){
    var firstRandomNumber = arc4random_uniform(NUMBER) + 1
    var firstImageString:String = String(format: "image%i", firstRandomNumber)

    self.ImageView.image = UIIMAge(named: firstImageString)

}

}

After connecting your outlets and adjusting the needed information in the code you should get a button that when clicked would return a random image after every click. I hope this can help you out.

Cheers.