CODEWITHSUNDEEP
angularcaching
Always_a_learner
Always_a_learner

Reputation: 5055

how to cache images paths in angular 2

I have created an image slider. To fetch next and previous images I have created 2 functions.

component.ts:

ngOnInit(){

  this.length = this.images.length; }

getNextImage(){
    this.imageUrl = '';
    this.imageIndex++;
    if (this.imageIndex< this.length){
      this.imageUrl = this.images[this.imageIndex] 
    }
}
getPreviousImage(){
  this.imageUrl = '';
     this.imageIndex++;
       if (this.imageIndex>= 0){
          this.imageUrl = this.images[this.imageIndex] 
          }
     }

Every time I click on previous and next buttons the image downloads again.

Is there a way that if image is already downloaded once then it can be saved in cache?

Is this only possible with service worker?

Upvotes: 1

Views: 241

Answers (2)

Athanasios Kataras
Athanasios Kataras

Reputation: 26362

Another option as decribed in this stack overflow question, would be to use Application Cache

Upvotes: 1

Ajaz
Ajaz

Reputation: 93

You can create markup for all images and show/hide images based on your condition. You may want to use hidden. In this case all images gets loaded in memory all at once and stays in memory until DOM is destroyed.

Upvotes: 1

Related Questions