如何在显示 Angular 网站之前加载图像

Question

我一直在用 Angular 做一个网站，我需要在显示之前加载所有图像。我试图找到一种方法来制作预加载器视图，该视图将在/assets加载文件夹中的所有图像之前显示，但我找不到任何内容。

我怎样才能在 Angular 中正确地做到这一点？

Answer 1

我可以给你两个选项来完成（假设你有图像网址列表）：

第一种方式

images = ["IMG_1_SRC","IMG_2_SRC"];
loaded = 0;

loadImages(){
  for(let i = 0; i < this.images.length; i++){
    let img = new Image();
    img.onload = () => {
      this.loaded();
    }
    img.src = this.images[i];
  }
}

loaded(){
  this.loaded++;
  if(this.images.length == this.loaded){
    //all images loaded
  }
}

第二种方式

images = ["IMG_1_SRC","IMG_2_SRC"];
loaded = 0;

<img hidden *ngFor="let img of images;" [src]="img" (load)="loaded()" />

loaded(){
  this.loaded++;
  if(this.images.length == this.loaded){
    //all images loaded
  }
}