HTML标记img的属性onload在Angular2中不起作用

我需要检测html <img>标记中的图像是否完全加载。HTML标记img的属性onload在Angular2中不起作用

这是我在Angular2组件模板中的代码。

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

这是我在这个组件代码：

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

之前完全加载，所有imagesLoadStatus[id]等于0，我希望在整个图像完全加载到它的事件onload更改为1。

但它根本不起作用。如何检测图像是否完全加载或不在Angular2中，请帮我弄清楚。

来源

2017-08-17 Belter

(onload)="loadOk(id)">

应该

(load)="loadOk(id)">

没有onload事件，只是一个load事件。 onload是JS注册一个事件监听器，但它不是Angulars事件绑定所需的事件名称。

来源

2017-08-17 09:47:33

它确实有效。我对这些“事件”名称感到困惑。顺便说一下，我想问问我在哪里可以查看所有这些活动的名称以及如何选择正确的活动名称？ – Belter

它们全部在HTML规范中进行了说明。请参阅https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement左侧栏中的'Events'。 Angular支持'（foo）=“bar（$ event）”'为每个DOM事件和每个'@Output（）foo;'的Angular组件。对于来自Angular组件的事件，您必须检查组件的源文件或文档。 –

我明白了，非常感谢！ – Belter

HTML标记img的属性onload在Angular2中不起作用

回答

相关问题