画像の事前読み込みができない

Question

教えてください。
画像を4つ外部URLより読み込み完了後にHTML出力させたいです。

非同期実行に起因しているのか読み込み完了することなくHTML出力されてしまいます。
どのようにすれば事前読み込み(preload)する事ができますか？
やりたい事はローディング表示を行い外部URLより画像をキャッシュさせてから画像を表示するようにしたいです。

■ サンプルURL
https://stackblitz.com/edit/angular-jt2clp

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  isloading = true;
　img = new Image();

  async ngOnInit() {
    this.img.src="https://wallpaperaccess.com/full/11750.jpg";
    this.img.src="https://wallpaperaccess.com/full/11751.jpg";
    this.img.src="https://wallpaperaccess.com/full/11752.jpg";
    this.img.src="https://wallpaperaccess.com/full/11753.jpg";
  }

  ngAfterViewInit() {
    this.isloading = false
  }

}

<div *ngIf="isloading; then loading; else elseBlock"></div>

<!-- ローディング中 -->
<ng-template #loading>ローディング中...</ng-template>

<!-- コンポーネント表示 -->
<ng-template #elseBlock>
  <img src="https://wallpaperaccess.com/full/11750.jpg"/>
  <img src="https://wallpaperaccess.com/full/11751.jpg"/>
  <img src="https://wallpaperaccess.com/full/11752.jpg"/>
  <img src="https://wallpaperaccess.com/full/11753.jpg"/>
  表示OK!
  </ng-template>

Answer 1

未実装ブラウザもあるようですが、preload というのがあります。
Preloadの説明は こちらも参考になるかと思います。

Answer 2

解決していませんが別の方法を探してみます。
ありがとうございました。