Angular 4 ngStyle背景圖片使頁面變慢。功能無限期呼籲滾動

"@angular/cli": "^1.1.1", 
    "@angular/compiler-cli": "^4.0.0",

我使用的是下面一行的動態加載從資產文件夾中的圖像。這也是內部NG-的

[ngStyle]="{'background-image': 'url(\'' + getPackageImage(package) + '\')'}

Component.ts

public getPackageImage(tPackage: any) { 
    return this.tpService.getImageFor(tPackage); 
    }

Service.ts

public getImageFor(tPackage: TourPackage) { 
    return "/assets/images/tour-packages/" + tPackage.name + "/image.jpg"; 
    }

它正確加載圖像。但問題是如果圖像的數量增加，頁面變得太慢。

每當我滾動getPackageImage多次調用，使ui緩慢。有沒有什麼辦法解決這一問題。

如果我硬編碼圖像的URL在CSS頁面工作正常..

我暫時主持它火力點 - Firebase link for problem

2017-06-21 Madhan

事實上，這個*函數*'getPackageImage'將被無限期調用。我建議你在組件中做這件事，循環一次元素（在ngOnInit上）。 – developer033

我該怎麼做？ @ developer033，所以你建議一起去除[ngStyle] .. – Madhan

在你的組件中循環遍歷元素（使用for）並設置一個屬性（類似url））...因此tô可以在模板中像這樣：'[ngStyle] =「{... Package.url ...}」' – developer033

問題是一些圖像，我有你sed是8k，4k，並調整大小以適合300 x 300格。

這就是爲什麼頁面被絞死。

調整圖像大小後，緩慢消失。

2017-06-23 18:55:32 Madhan

的確，它可能是**一個**的問題。另一個就是我在評論中所說的（「函數」被無限期地稱爲）。 – developer033

爲@ developer033說：

myImage: string; 
ngOnInit() { 
    this.myImage = this.tpService.getImageFor(this.tPackage); 
}

HTML：

[ngStyle]="{'background-image': 'url(\'' + myImage + '\')'}

2017-06-22 18:57:18 Avi

這不是單一的形象..它是多個圖像..它實際上是在forloop ..試了這個，但仍然是相同的結果 – Madhan

回答