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
– devnull69, Commented Sep 17, 2015 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
– Petr Averyanov, Commented Sep 17, 2015 at 18:08

Community · Accepted Answer · 2017-05-23 12:06:41Z

3

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, 2017 at 12:06

CommunityBot

11 silver badge

answered Sep 17, 2015 at 13:50

Stefan Kendall

68.2k69 gold badges259 silver badges409 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

devnull69 Over a year ago

I will check this out

devnull69 Over a year ago

Yes that does the trick ... I can even get the rendered image's width/height within the first requestAnimationFrame callback

Collectives™ on Stack Overflow

Detect when image has finished rendering on screen

1 Answer 1

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Linked

Related