加载新图像时删除图像？答案

【问题标题】：Remove image when loading a new one?加载新图像时删除图像？
【发布时间】：2016-05-21 01:37:22
【问题描述】：

我有一个项目列表，单击该列表将显示一个更大的信息面板，其中包含有关单击项目的更详细信息。我正在像这样设置图像标签的来源：

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

我正在使用 Chrome 的网络节流来模拟慢速网络。

当我单击第一个项目（项目 A）时，这个 img 标签会设置它的 src，您会看到图像 A 一次出现一点点。但是，当您单击第二个项目（项目 B）时，图像 A 将继续完整显示，直到图像 B 完全下载，然后才会完整显示图像 B。同时，所有其他信息都已完全加载，因此在详细信息窗格中，我暂时看到了项目 B 的所有详细信息，但我继续看到项目 A 的图像。没有迹象表明正在加载。

在纸面上，我觉得有几种方法可以回答这个问题。 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.我担心使用 ajax 发出请求意味着我会丢失浏览器本机使用的缓存。如果我选择项目 A，然后选择项目 B，然后返回项目 A，我希望图像 A 立即加载，因为它已经在缓存中，并且它目前确实可以使用我上面的内容。我不认为 ajax 请求被缓存，所以这将是一个退步。我还可以为处理更改的图像编写一个新组件，但这似乎有点矫枉过正，并且可能会遇到相同的缓存问题。

当使用 Angular2 修改 src 时，显示图像标签当前正在更改为新图像的首选方式是什么？有没有比直接操作 src 更好的方法来指示图像正在发生变化？

【问题讨论】：

标签： angular

【解决方案1】：

在完成加载时使用*ngIf 和load 元素触发的load 事件应该可以工作

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

当您更改id 属性时，还要设置isLoading = true

【讨论】：

由于ngIf 如果条件为假，则从 DOM 中删除标签，更改 src 不会真正触发图像的下载。这意味着(load) 永远不会被调用来停止加载。但我敢打赌我可以使用display: none 来实现这一点。