Detect when image has finished rendering on screen

Question

This is essentially my HTML. It is part of a responsive design so I cannot rely on fixed widths/heights:

<img ng-src="{{imageSrc}}" />

The value of $scope.imageSrc is changed inside my controller and the view is updating properly.

But: At the point of time the image has finished rendering I need to get its clientWidth and clientHeight properties.

So how can I detect programmatically that

the image has finished loading and
the view has been fully updated with the rendered image

without using weird timeouts?

It works but it seems weird to use this type of "timeout hack" — devnull69, Sep 17 '15 at 14:27
I am not condering this a hack. Javascript is one thread, so using timeout with 0 is absolutely ok, behavior of such code is quite stable. Well, at least I think so. — Petr Averyanov, Sep 17 '15 at 18:08

score 2 · Accepted Answer · edited May 23 '17 at 12:06

2

Two other questions will help you here. This SO post will detect loading via the load event.
And this post will detect rendering via requestAnimationFrame.

edited May 23 '17 at 12:06

Community

1
1

answered Sep 17 '15 at 13:50

Stefan Kendall

66,414
68
253
406

I will check this out – devnull69 Sep 17 '15 at 14:00
Yes that does the trick ... I can even get the rendered image's width/height within the first requestAnimationFrame callback – devnull69 Sep 17 '15 at 14:28

Detect when image has finished rendering on screen

1 Answers1