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中不起作用

回答

相關問題