Обнаруживать, когда изображение загружено в тег img

Я использую Angular 2 и мне нужно определить, загружено ли изображение в тег изображения.

Ответы

Ответ 1

<img [src]="imagesource" (load)="dosomething()">

Ответ 2

Расширяем первый ответ, чтобы изучить только что загруженное изображение.

    <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);
        }
      }

Однако я увидел, что Chrome отправляет событие дважды, с разными размерами! Я смог определить правильный размер по событию, где evt.scrElement.x и y были равны нулю. Но это не всегда так, и я не уверен, почему есть два события?

    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);
          }
        }
     }