Belter Belter - 1 year ago 67
HTML Question

HTML tag img's property onload does not work in Angular2

I need to detect if an image in html

<img>
tag loaded completely.

This is my code in the template of Angular2 component.

<li *ngFor="let id of imagesId">
<img width="300" src="{{imagesUrl[id]}}"
*ngIf="imagesUrl[id]"
(onload)="loadOk(id)">
<div *ngIf="!imagesLoadStatus[id]" class="loader"></div>
</li>


This is my code in this component:

loadOk(id: number) {
this.imagesLoadStatus[id] = 1;
}


Before loaded completely, all
imagesLoadStatus[id]
equal to
0
, and I want to change it to
1
by event
onload
when the whole image loaded completely.

But it does not work at all. How can I detect whether an image loaded completely or not in Angular2, Please help me figure it out.

Answer Source
(onload)="loadOk(id)">

should be

(load)="loadOk(id)">

There is no onload event, only a load event. onload is for JS to register an event listener, but it's not the events name which is required for Angulars event bindings.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download