css - Angular 4 ngStyle 背景图像使页面变慢。滚动时无限期调用的函数

Question

我正在使用 Angular CLI 元素

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

我正在使用下面的行从 Assets 文件夹中动态加载图像。它也在 ng-for 中

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

组件.ts

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

服务.ts

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

它正在正确加载图像。但问题是，如果图片数量增加，页面就会变得太慢。

每当我多次滚动调用 getPackageImage 并使 ui 变慢时。有什么办法可以解决这个问题。

如果我在 css 中硬编码图像 url，页面工作正常..

我暂时将其托管在 firebase 上 - Firebase link for problem

Answer 1

正如@developer033 所说:

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

html:

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