如何知道圖像何時以角度完全加載？

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示例