检测图像何时加载到 img 标签中答案

【问题标题】：Detect when image has loaded in img tag检测图像何时加载到 img 标签中
【发布时间】：2016-08-31 19:36:50
【问题描述】：

我正在使用Angular 2，我需要检测图像是否已加载到图像标签中。

有活动吗？

类似这样的：

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

【问题讨论】：

标签： angular

【解决方案1】：

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

【讨论】：

嗨，你知道为什么Observable.fromEvent(elementReference, 'load') 的工作方式不一样吗？另外，关于为什么每次src 更改时dosomething() 被多次调用的任何提示？谢谢
我认为 dosomething() 被调用两次是 Chrome 的问题。我调查并评论了一个类似的问题，但不记得细节。
好的，谢谢，Observable.fromEvent(imgElementReference, 'load') 和 <img (load)="..."> 有什么经验吗？
我从未尝试过Observable.fromEvent(elementReference, 'load')。为什么它的工作方式不一样？
@GünterZöchbauer 谢谢，我找到了原因，图像在 *ngIf 中，其条件为假。抱歉打扰了。

【解决方案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);
          }
        }
     }

【讨论】：

load 和 onload 监听器有什么区别？
好问题。我不确定，但我认为 onload 是原生 html 事件，而 load 是 Angular 模板等价物。见stackoverflow.com/questions/43301624/…。