Angularで画像をプリロードしたい

Question

前提・実現したいこと

Angularで画像をプリロードしたいです。
何かいい方法がありましたら、教えて欲しいです。

ソースコード

ImageObjectが使い勝手がよいので使いたいと思ってます。

const image = new Image();
image.src = '../../assets/sample.png';

試したこと

せっかくAngular使ってるので、ElementRefはあまり使いたくありません。

Answer 1

メモ）PreloadingStrategyが使えそう

Answer 2

ngOnInit内でプリロードしてはどうでしょうか。

app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'imagePL';

  isVisible=false;

  img = new Image();

  ngOnInit(){
    this.img.src="../assets/a.jpg";
  }

  onClick(){
    this.isVisible=true;
  }

}

app.component.html

<input type="button" value="click me" (click)="onClick()"/>

<div *ngIf="isVisible">
  <img src="../assets/a.jpg" />
</div>

Comments

[syuma1214]

回答ありがとうございます。
これだと２回画像が読まれないですか？

[BlueMoon]

実はプリロード使うの初めてなのですが、imgオブジェクトのsrcを指定することでブラウザにキャッシュされるので、htmlのリンクではキャッシュヒットするのでhttpプロトコルで画像は新たに読み込まれないという解釈でしたが、間違っていたら済みません。ボタンをクリックすれば読み込みずみなので瞬時に画像が表示されると思います。