Как узнать, когда изображение полностью загружено в угловом формате? - PullRequest
Новая
       19

Как узнать, когда изображение полностью загружено в угловом формате?

1 голос
/ 28 июня 2019

Как я могу узнать, когда изображение было полностью загружено, а затем показать его? Позвольте мне объяснить: я показываю изображение следующим образом: 

<img src = "www.domain.com">

но бывают случаи, когда требуется загрузка, и я хочу показать его только тогда, когда он готов к показу (загружен на 100%), как вы, возможно, знаете, когда загружено это изображение на 100%? и я хотел бы показать загрузочный счетчик, пока загрузка этого изображения завершена, я использую угловую 7.

1 Ответ

3 голосов
/ 28 июня 2019

Нет разницы в том, как вы проверите это в Angular или в js.

Вам необходимо проверить флаг img.complete или дождаться события image.onLoad.

Угловые директивы позволяют нам обрабатывать такое поведение элемента, поэтому давайте создадим директиву: 

import { Directive, Output, EventEmitter, ElementRef, HostListener, OnInit } from '@angular/core';

@Directive({
  selector: 'img[loaded]'
})
export class LoadedDirective {

  @Output() loaded = new EventEmitter();

  @HostListener('load')
  onLoad() {
    this.loaded.emit();
  }

  constructor(private elRef: ElementRef<HTMLImageElement>) {
    if (this.elRef.nativeElement.complete) {
      this.loaded.emit();
    }
  }
}

Теперь вы можете ловить, когда изображение загружается простым кодом: 

<img src="..." alt="" (loaded)="do whatever you want here">

Ng-run Пример

...