Remove image when loading a new one?
<p>I have a list of items that when clicked on will show a larger information panel with more detailed info on the clicked item. I'm setting the source of an image tag like so:</p>

<pre><code>&lt;img [src]="'/imgs/' + id + '.png'" /&gt;
</code></pre>

<p>I'm using Chrome's network throttling to simulate slow networks.</p>

<p>When I click the very first item (item A), this img tag gets it's src set and you see image A appearing a little at a time. When you click the second item (item B) however, image A will continue to show in it's entirety until image B has been fully downloaded and only then will image B be displayed fully. In the mean time, all the other information has fully loaded so in the details pane for a moment I see all of item B's details except I continue to see item A's image. There's no indication that the loading is taking place.</p>

<p>On paper I feel there are a couple ways to answer this. For example when a new item is selected, I could show a loading icon until the new image is fully loaded by using ajax to request the new image. I'm worried that using ajax to make the request means that I'll lose the caching that the browser natively uses. If I select item A, then item B, and go back to item A I'd love for image A to load instantly because it's already in the cache and it does currently do that with what I have above. I don't think ajax requests are cached so that would be a step back. I also could write a new component just for the image that handles the change but that seems like overkill and might run into the same cache problem.</p>

<p>What would be the preferred way to show that an image tag is currently changing to a new image when using Angular2 to modify the src? Is there a better approach than directly manipulating the src that would allow me to indicate that the image is changing?</p>