using onload function while rendering an image in typescript

Question

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.

user184994 · Accepted Answer · 2018-04-20 16:27:07Z

4

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

answered Apr 20, 2018 at 16:27

user184994

18.3k2 gold badges51 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

using onload function while rendering an image in typescript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related