如何知道图像何时以角度完全加载？

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">

吴运行示例