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 Example

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

1 个答案: