延迟加载angular7中的图像

Question

我正在从后端获取5000张图像。我的图像需要延迟加载，我已经看了一些视频并实现了ng-lazyload-image模块，但是它没有按预期工作，几秒钟后我的页面每次都崩溃，而且该选项卡非常滞后。做like 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>

Answer 1

您应该使用虚拟滚动或无限滚动。

• 虚拟滚动效果更好，因为记录是固定的，我们回收DOM元素以显示新数据滚动到屏幕之外。
• 无限滚动，您获取了一定数量的记录并将其插入进入列表，一旦到达底部，它将获取下一批将它们插入列表，并重复该操作，只要您有项目获取。

这是virtual scrolling 的示例