How to detect if the image of UIImageView has changed

Question

I have an app where the user can choose an image from the camera roll and than that image is loaded into an UIImageView. However, if the image is big there is a delay till the selected image actually appears in the UIImageView (Setting the image is not performed on the main thread so the UI does not get frozen). Until the image is set, I would like to show an activity indicator which notifies the user that the app did not freeze, its just loading the image. However I don't know how to detect when the image got set in the UIImageView to hide the activity indicator. I am guessing maybe KVO could help here, but I am not sure how to implement it properly.

Sorry for the noob question! :)

There is already an answer on how to KVO image property on UIImageView http://stackoverflow.com/questions/10508422/is-there-a-way-to-get-notified-when-my-uiimageview-image-property-changes Does this help? — libec, Jul 31 '15 at 20:27
Yep, I saw that but did not really understand how it works, neither did the tutorials on the net help. Thats why I decided to turn to you guys. — Balázs Vincze, Jul 31 '15 at 20:30
> There is another way to know that. [click here](http://stackoverflow.com/a/43389837/4328271) — Abdul Hameed, Apr 13 '17 at 10:38

score 18 · Answer 1 · answered Jul 31 '15 at 21:46

18

If you're using swift you can also create UIImageView subclass and override image property to observe the values with didSet. Just remember to set the image of the superclass.

class ImageView: UIImageView {
    override var image: UIImage? {
        didSet {
            super.image = image
            println("Image Set")
        }
    }
}

answered Jul 31 '15 at 21:46

libec

1,555
1
10
19

Thanks, it's good to know but unfortunately I am not using Swift. :( – Balázs Vincze Jul 31 '15 at 22:20

Hari Kunwar · Accepted Answer · 2015-07-31T20:51:03.750

Observe UIImageView image property using KVO. Add code to stop spinner in place of NSLog(@"imageReady");.

@implementation ViewController {
   __weak IBOutlet UIImageView *_imageView;
}

- (void)viewDidLoad {
   [super viewDidLoad];
   // Do any additional setup after loading the view, typically from a nib.
   [_imageView addObserver:self forKeyPath:@"image" options:NSKeyValueObservingOptionNew context:NULL];
}

- (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary *)change context:(void *)context {
  if ([keyPath isEqualToString:@"image"]) {
     //Image ready
     //Stop loading spinner.
     NSLog(@"imageReady");
  }
}

Lance Samaria · Answer 3 · 2021-03-26T14:10:03.713

1- create an NSKeyValueObservation property

2- initialize the property in viewDidLoad with yourImageView.observe...

3- set it so that it listens for \.image and set the options to [.old, .new]

4- remove the observer in deinit

@IBOutlet var yourImageView: UIImageView!

var observer: NSKeyValueObservation? // 1.

override func viewDidLoad() {
    super.viewDidLoad()

    observer = nil // not necessary but still

    // 2.                            // 3.
    observer = yourImageView.observe(\.image, options: [.old, .new], changeHandler: { [weak self](imageView,_) in
            
        guard let img = imageView.image else { return }

        print("an image was set on your imageView, do something with the image", img)
    })
}

deinit {

    observer = nil // 4.
}

How to detect if the image of UIImageView has changed

3 Answers3