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

Question

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

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

标签： angularpreload

Answer 1

我可以给你 2 个选项来完成（假设你有图片 url 列表）：

第一种方式

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
  }
}