在img标签中加载图像时检测

Question

我正在使用Angular 2,我需要检测图像加载到图像标签中的时间.有没有这样的事件,例如这样的事情

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

Answer 1

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

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