angular - 如何知道图像何时以 Angular 完全加载？

Question

我怎样才能知道图像何时已完全加载然后显示它？让我解释一下:我正在以下列方式显示图像:

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

但有时需要加载，我只想在它准备好显示时显示它(100% 加载)，你可能知道什么时候 100% 加载了该图像？我想在该图像加载完成时显示一个加载微调器，我使用的是 Angular 7。

Answer 1

在 Angular 或 js 中检查它的方式没有区别。

您需要检查 img.complete 标志或等待触发 image.onLoad 事件。

Angular 指令允许我们处理元素的这种行为，所以让我们创建一个指令:

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 Example