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

Question

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

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

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