How to load images before showing an Angular Website

Question

I have been doing a website in Angular, and I need to load all images before showing it. I tried to find a way to make a preloader view that would be shown until all the images located in the /assets folder are loaded, but I could not find anything.

How can I do it properly in Angular?

Asaf · Accepted Answer · 2020-10-04 18:14:47Z

11

I can give you 2 options to accomplish (Assuming that you have list of image urls):

First way

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

Second way

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

answered Oct 4, 2020 at 18:14

Asaf

1,59211 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Georgy Spassky Over a year ago

let img = new Image(); img.src = images[i];

Collectives™ on Stack Overflow

How to load images before showing an Angular Website

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related