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)")
}
}