91

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()">
BBaysinger
  • 6,614
  • 13
  • 63
  • 132
doorman
  • 15,707
  • 22
  • 80
  • 145

2 Answers2

171
<img [src]="imagesource" (load)="dosomething()">
Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567
  • 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? Thanks – crash Apr 04 '17 at 07:13
  • I think that `dosomething()` is called twice is a Chrome issue. I investigated and commented on a similar question but don't remember details. – Günter Zöchbauer Apr 04 '17 at 07:14
  • Ok thanks, and any experience on `Observable.fromEvent(imgElementReference, 'load')` vs ``? – crash Apr 04 '17 at 09:43
  • I never tried `Observable.fromEvent(elementReference, 'load')`. How does it not work the same way? – Günter Zöchbauer Apr 04 '17 at 09:44
  • Oh ok no problem them, it was just curiosity, I ended up using the method you suggested in the answer. I was just wondering why the jQuery method `.on('load')` seems to work while the Observable equivalent (I suppose) does not (in the sense that the Observables' subscription is never triggered). – crash Apr 05 '17 at 12:55
  • Perhaps a problem with `elementReference`? How do you get it? Perhaps you need `elementReference.nativeElement`. – Günter Zöchbauer Apr 05 '17 at 12:57
  • Was just a guess. Sorry, no idea. – Günter Zöchbauer Apr 05 '17 at 14:13
  • No problem at all, thanks a lot anyway for your time! – crash Apr 05 '17 at 14:20
  • Hello, what about if there are `srcset` attributes and this is a responsive image, will that also work? – Sammy Jun 12 '17 at 18:02
  • Sure, why not? `src` and `load` in my code are not Angular specific. These are a property and an event from the `` element. – Günter Zöchbauer Jun 12 '17 at 18:05
  • Hi guys, (load) event doesn't fire with me, while (error) event fires!, any ideas – Hany Feb 15 '18 at 19:07
  • 3
    @GünterZöchbauer Thanks, I got the cause, the image was within *ngIf whose condition was false. Sorry for bothering. – Hany Feb 15 '18 at 19:35
  • is there any other way to listen changes on src like i could subscribe to this? I have element in ts file. – Sunil Garg May 04 '18 at 10:52
  • You can always create an observable using `Observable.fromEvent`, otherwise, no, that's a DOM event unrelated to Angular. My code above just shows how to listen to DOM events using Angular binding syntax. – Günter Zöchbauer May 04 '18 at 10:54
10

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);
          }
        }
     }
intotecho
  • 4,925
  • 3
  • 39
  • 54
  • 1
    What is the difference between the load and and onload listeners? – Ben Apr 14 '20 at 17:58
  • Good question. I am not sure but I think that onload is the native html event, and load is the Angular template equivalent. See https://stackoverflow.com/questions/43301624/angular-img-loading-directive. – intotecho Apr 15 '20 at 04:20
  • @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...) – Eliseo Sep 08 '22 at 05:59