CODEWITHSUNDEEP
htmlangularimagetypescript
Nehil Danış
Nehil Danış

Reputation: 79

using onload function while rendering an image in typescript

I am trying to render some image from a URL. However while I am doing this, it always takes some time for the image to be rendered. For this reason, I want to use a spinner. I couldn't find how to use onload function for this aim. I want to set loadingImg to true first then start rendering image and then in the end I want to set loadingImg false again, to make spinner disappear. But somehow I couldn't manage it.

<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>

Here is the component.ts

loadImage() {
    this.loadingImg = false;
}

Is there anyone who can help me on this?

Thanks in advance.

Upvotes: 3

Views: 1198

Answers (1)

user184994
user184994

Reputation: 18281

Just add the load event to your image tag, like so:

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

This will call loadImage in your controller once it's loaded

Upvotes: 4

Related Questions