Angular 2+에서 IMG 요소가 로드된 경우 감지

Angular 2+에서 IMG 요소가 로드된 경우 감지

사용 중Angular 2이미지 태그에 이미지가 로드되었는지 확인해야 합니다.

그것을 위한 행사가 있습니까?

이와 같은 것:

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

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

첫 번째 답변을 확장하여 방금 로드된 이미지를 검사합니다.

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

하지만, 크롬은 크기가 다른 두 번의 이벤트를 보내는 것을 보았습니다!evt.scrElement.x 및 y가 0인 이벤트에서 올바른 크기를 감지할 수 있었습니다.하지만 항상 그렇지는 않을 수도 있고 왜 두 개의 이벤트가 있는지 잘 모르겠습니다.

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

언급URL : https://stackoverflow.com/questions/39257687/detect-when-img-element-has-loaded-in-angular-2