Lazy loading of images in angular7

Question

I am getting 5000 images from the backend. I images need to be lazy-loaded and I have watched some videos and implemented ng-lazyload-image module but it's not working as expected and My page is getting crash every time after few seconds and also that tab lagging very much.I supposed to do like this

i tried doing this

  albums:any[];
  photos:any[];
  defaultImage = 'https://www.placecage.com/1000/1000';
  offset = 50;

  constructor(private service: AlbumService) { }

  ngOnInit() {
    this.list()
    this.pics()
  }
  list() {
    this.service.getAlbums().subscribe(res => {
      this.albums = res;
      console.log(this.albums)
    });
  }

  pics() {
    this.service.getPhotos().subscribe(res => {
      this.photos = res;
      console.log(this.photos)
    });
  }
}

<div class="card" *ngFor="let album of albums">
    <div class="card-body">
      <h5 class="card-title">{{album.title}}</h5>
      <h6 class="card-subtitle mb-2 text-muted">id:{{album.id}},userid:{{album.userId}}</h6>
      <div class="container carousel-inner no-padding" *ngFor="let photo of photos">
        <div class="carousel-item active">
          <div class="col-xs-3 col-sm-3 col-md-3">
            <img [lazyLoad]="photo['url']" [defaultImage]="defaultImage" [offset]="offset">

          </div> 
    </div>
  </div>

5000 images! i think you also need to look in to virtual scrolling — C.OG
– C.OG, Commented Dec 20, 2019 at 12:30
Virtual Scrolling is definitely the way to go! Basically it will dynamically render objects as needed depending on your scroll position. I used it for a searchable select box with around 1000 elements and it really made a difference! — NiallMitch14
– NiallMitch14, Commented Dec 20, 2019 at 12:39
Take a look at this StackBlitz of your code...seems to be working. — ViqMontana
– ViqMontana, Commented Dec 20, 2019 at 12:45

BELLIL · Accepted Answer · 2019-12-21 04:14:06Z

3

You should use Virtual scrolling or Infinte scrolling.

Virtual scrolling is better for performance beacause the number of records is fixed, we recycle DOM elements to display new data as they scroll off the screen.
Infinite scroll you fetch a set number of records and insert them into a list, once you reach the bottom it'll fetch the next batch and insert them into the list and repeat that as long as you have items to fetch.

this is an example of virtual scrolling

answered Dec 21, 2019 at 4:14

BELLIL

76510 silver badges23 bronze badges

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

Collectives™ on Stack Overflow

Lazy loading of images in angular7

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related