Question

我正在尝试从URL渲染一些图像。但是，当我这样做时，渲染图像总是需要一些时间。出于这个原因，我想使用一个微调器。我无法找到如何使用onload函数来达到这个目的。我想首先将loadingImg设置为true然后开始渲染图像然后最后我想再次设置loadingImg false，以使spinner消失。但不知怎的，我无法管理它。

<span class="spinner" *ngIf="loadingImg">
     Loading...
</span>
<img *ngIf="!loadingImg" src="someCoolUrl/img.png" onload="loadImage" height="300" width="300">
<button class="btn btn-sm" (click)="openedImage = null; openedImage = item.id; loadingImg = true;"></button>

这是component.ts

loadImage() {
    this.loadingImg = false;
}

是否有人可以帮助我？

提前致谢。

Answer 1

只需将load事件添加到您的图片代码中，就像这样：

<img [src]="src" alt="Image not found..." (load)="loadImage()" />

一旦加载

，这将在你的控制器中调用loadImage

在打字稿中渲染图像时使用onload函数

1 个答案: