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

Question

我一直在Angular做一个网站，我需要在显示之前加载所有图片。我试图找到一种方法来制作一个预加载器视图，该视图将在加载位于 /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
  }
}

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

How to load images before showing an Angular Website

preload

angular