加载新图像时要删除图像吗? [英] Remove image when loading a new one?

问题描述

我有一个项目列表，单击这些项目将显示一个更大的信息面板，其中包含有关所单击项目的更多详细信息.我正在设置图像标签的来源，如下所示:

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:

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

我正在使用Chrome的网络限制功能来模拟慢速网络.

I'm using Chrome's network throttling to simulate slow networks.

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

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.

在纸上，我觉得有两种方法可以解决这个问题.例如，当选择了新的项目，我可以显示一个加载图标，直到新的图像完全被使用AJAX请求新图像加载.我担心使用ajax发出请求意味着我将失去浏览器本机使用的缓存.如果我选择项目A，然后选择项目B，然后返回项目A，我希望立即加载图像A，因为它已经在缓存中，并且目前可以使用上面的功能来完成.我不认为ajax请求会被缓存，所以这会退后一步.我还可以只为处理更改的图像编写一个新组件，但这看起来有些过分，并且可能会遇到相同的缓存问题.

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.

当使用Angular2修改src时，显示图像标签当前正在更改为新图像的首选方法是什么?是否有比直接操作src更好的方法，使我可以指示图像正在更改?

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?

推荐答案

使用 * ngIf 和< img>触发的 load 事件元素加载完成后应该可以工作

Using *ngIf and the load event fired by the <img> element when done loading should work

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

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

When you change the id property, then also set isLoading = true

这篇关于加载新图像时要删除图像吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！