新しい画像を読み込むときに画像を削除しますか？

Question

私は、クリックされると、クリックされたアイテムに関するより詳細な情報を含むより大きな情報パネルを表示するアイテムのリストを持っています。画像タグのソースを次のように設定しています。

<img [src]="'/imgs/' + id + '.png'" /> 

低速ネットワークをシミュレートするためにChromeのネットワークスロットルを使用しています。

非常に最初のアイテム（アイテムA）をクリックすると、このimgタグがsrcになり、画像Aが少しずつ表示されます。ただし、2番目の項目（項目B）をクリックすると、画像Bは完全にダウンロードされてから画像Bが完全に表示されるまで、画像Aは完全に表示され続けます。その間、他のすべての情報は完全にロードされていますので、アイテムAのイメージが表示され続ける以外は、アイテムBの詳細がすべて表示されます。積み込みが行われているという兆候はありません。

私はそこに答えるいくつかの方法があると感じています。たとえば、新しいアイテムが選択されたときに、新しいイメージを要求するためにajaxを使用して新しいイメージが完全にロードされるまで、ロードアイコンを表示できます。私は、リクエストを作成するためにajaxを使用すると、ブラウザがネイティブに使用するキャッシングを失うことになることを心配しています。アイテムAを選択し、アイテムBを選択してアイテムAに戻ると、イメージAが既にキャッシュに入っているので、イメージAがすぐに読み込まれるのが大好きです。私はajaxリクエストがキャッシュされているとは思わないので、一歩後退します。私はまた、変更を処理するイメージのために新しいコンポーネントを書くこともできますが、それは過剰なもののように思えますし、同じキャッシュの問題に遭遇するかもしれません。

Angular2を使用してsrcを変更するときに画像タグが現在新しい画像に変更されていることを示すにはどうすればよいですか？イメージが変化していることを示すためにsrcを直接操作するよりも良いアプローチがありますか？あなたがidプロパティを変更するとするときに行わ荷重が

<img *ngIf="isLoading" [src]="'/imgs/' + loading + '.png'" /> 
<img [hidden]="isLoading" [src]="'/imgs/' + id + '.png'" (load)="isLoading = false"/> 

を動作するはず*ngIfと<img>要素により解雇loadイベントを使用して

Answer 1

は、その後もからタグを削除