防止負載ngFor

Question

我有一個* ngFor內部的圖像的列表，我需要控制圖像的負載爲：用索引號

1. 首先負載圖像X
2. 當所有其他圖像加載，啓動功能

我的目標是首先顯示最重要的圖像，儘快沒有其他圖像消耗帶寬。

我發現了一些JavaScript解決方案，但它們都使用了不允許使用的文檔和窗口對象，或者由角色團隊推薦使用。

我有一個非常簡單的模型和視圖。它甚至有可能嗎？

var images = ['src1','src2','src3','src4']; 

<div *ngFor = "let img of images"> {{img}} </div> 

Answer 1

images = ['src1','src2','src3','src4']; 
isImportantLoaded = false; 
// set values to true for indexes that matches important images 
// after all were set to false, set isImportantLoaded to true, 
// to get the non-important images loaded 
importantImages = [false, true, false, true]; 

setLoaded(idx) { 
    this.importantImages[idx] = false; 
    var found = this.importantImages(true); 
    if(found < 0) { 
    this.isImportantLoaded = true; 
    } 
} 

<ng-container *ngFor="let image of images, let i=index"> 
    <img (load)="setLoaded(i)" [href]="image" *ngIf="isImportant[i] || isImportantLoaded"> 
</ng-container> 

Answer 2

試試這個：

<div *ngFor = "let img of images"> 
    <img [src]="img" (load)="onLoad($event)"/> 
</div> 

在組件：

onLoad($event){ 
    //do something $event.target 
}