我有一个项目列表，当点击时会显示一个更大的信息面板，其中包含有关所点击项目的更详细信息。我正在设置像这样的图像标签的来源：
<Child property={this.state.property} />我正在使用Chrome的网络限制来模拟慢速网络。
当我点击第一个项目（项目A）时，此img标签会将其设置为src并且您会看到图像A一次出现一点。但是，当您单击第二个项目（项目B）时，图像A将继续全部显示，直到图像B完全下载，然后图像B才会完全显示。同时，所有其他信息已经完全加载，所以在细节窗格中片刻我看到了项目B的所有细节，除了我继续看到项目A的图像。没有迹象表明正在进行装载。
在纸面上我觉得有几种方法可以回答这个问题。例如，当选择一个新项目时，我可以显示一个加载图标，直到新图像完全加载为止，使用ajax来请求新图像。我担心使用ajax来发出请求意味着我将失去浏览器本身使用的缓存。如果我选择项目A，然后选择项目B，并返回到项目A我会喜欢图像A立即加载，因为它已经在缓存中，并且它目前使用我上面的内容执行此操作。我不认为ajax请求是缓存的，所以这将是退一步。我也可以为处理更改的图像编写一个新组件，但这看起来有点过分，可能会遇到相同的缓存问题。
当使用Angular2修改src时，显示图像标记当前是否正在更改为新图像的首选方法是什么？有没有比直接操作src更好的方法，这可以让我指出图像正在改变？
答案 0 :(得分：2)
完成加载后，使用*ngIf和load元素触发的<img>事件应该可以正常工作
<img *ngIf="isLoading" [src]="'/imgs/' + loading + '.png'" />
<img [hidden]="isLoading" [src]="'/imgs/' + id + '.png'" (load)="isLoading = false"/>
更改id属性后，还要设置isLoading = true