Belter Belter - 11 months ago 61
HTML Question

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

I need to detect if an image in html

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]}}"
<div *ngIf="!imagesLoadStatus[id]" class="loader"></div>

This is my code in this component:

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

Before loaded completely, all
equal to
, and I want to change it to
by event
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

should be


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