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

Question

我怎么能知道图像何时完全加载然后显示它？ 让我解释一下：我用以下方式显示图像：

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

但有时需要加载，我想只在它准备好显示（100％加载）时显示它，你可能知道什么时候100％加载该图像？ 我想显示一个加载微调器，同时该图像的加载完成，我使用角度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示例