I am using Angular 2 and I need to detect if an image has loaded in an image tag.
Is there an event for that?
Something like this :
<img [src]="imagesource" [loaded]="dosomething()">
Add a comment
|
2 Answers
<img [src]="imagesource" (load)="dosomething()">
answered Aug 31, 2016 at 19:51
Günter Zöchbauer
661k235 gold badges2.1k silver badges1.6k bronze badges
14 Comments
crash
Hi, do you know why
Observable.fromEvent(elementReference, 'load') does not work the same way? Also, any hint on why dosomething() gets called more than once each time src changes? ThanksGünter Zöchbauer
I think that
dosomething() is called twice is a Chrome issue. I investigated and commented on a similar question but don't remember details.crash
Ok thanks, and any experience on
Observable.fromEvent(imgElementReference, 'load') vs <img (load)="...">?Günter Zöchbauer
I never tried
Observable.fromEvent(elementReference, 'load'). How does it not work the same way?
Hany
@GünterZöchbauer Thanks, I got the cause, the image was within *ngIf whose condition was false. Sorry for bothering.
|
Extending the first answer to examine the image that just loaded.
<img [src]="imagesource" (load)="onImageLoad($event)">
onImageLoad(evt) {
if (evt && evt.target) {
const width = evt.target.naturalWidth;
const height = evt.target.naturalHeight;
const portrait = height > width ? true : false;
console.log(width, height, 'portrait: ', portrait);
}
}
However, I saw that chrome sends the event twice, with different sizes! I was able to detect the correct size from the event where evt.scrElement.x and y was zero. But this might not always be the case and I'm not sure why there are two events?
onImageLoad(evt) {
if (evt && evt.target) {
const x = evt.srcElement.x;
const y = evt.srcElement.y;
if ((x === 0 ) && (y === 0)) {
const width = evt.srcElement.width;
const height = evt.srcElement.height;
portrait = height > width ? true : false;
console.log('Loaded: ', width, height, 'portrait: ', portrait);
}
}
}
3 Comments
Ben
What is the difference between the load and and onload listeners?
intotecho
Good question. I am not sure but I think that onload is the native html event, and load is the Angular template equivalent. See stackoverflow.com/questions/43301624/….
Eliseo
@Ben, in Angular the events you attach in the html tag are the same without
on, e.g. (click) vs onclick, (keydown) vs onkeydown, etc. -see that in javascript not enclosed by ( ). When you use fromEvent rxjs operator, HostListener or addEventListener you always use the "not on" way. (the event name are click, keydown, load...)