javascript - 在角度 6 中更改 img src 在完全加载之前不会显示新图像

Question

当我更新图像的源时，我的 Angular 应用程序出现了一些意外行为，我希望有人能帮助我。

我有这样的事情：

<img [src]="imageUrl" />

并在用户单击按钮查看下一张图片时更新我的​​组件中的 imageUrl。这行得通。

当第一张图片加载时，我看到它从上到下加载。

但是，后续图像不会以这种方式显示。当我更改 imageUrl 变量时，我可以在屏幕上的另一个位置看到 url 更改，但实际图像在完全加载之前不会更改，然后它会弹出到位。

所以我的问题是：有没有办法让后续图像以与原始图像相同的方式加载？我的一些图片可能非常大，并且在 100% 加载之前对用户很有用，所以我真的希望他们能够在加载时看到它们。

我尝试使用 document.getElementById 然后以这种方式更新 src 属性，不幸的是它似乎以相同的方式执行。如果我做这样的事情：

const container = document.getElementById('imagePlaceholder');
const img = document.createElement('img');
container.innerHTML = '';
img.setAttribute('src', this.imageUrl);
container.appendChild(img);

它确实以我想要的方式加载。

有任何想法吗？

编辑：找到了一些很好的示例图片来说明我从这里谈论的内容。第一个图像像这样加载，然后后续图像像这样加载（没有加载指示器）

编辑 2：想出了一个更好的解决方法。使用 *ngFor 并将 imageUrl 作为其中唯一的东西可以获得所需的结果。仍然很奇怪，但比摆弄dom好得多。

imageUrls = [ this.imageUrl ];
...
<img *ngFor="let url of imageUrls" [src]="url" />

标签： javascriptangularangular6