dom元素进入视图时的延迟加载Angular 2

Question

我有一张x张专辑列表，会加载到模态中。我最初拥有的唯一数据是专辑类型和该专辑中资产的网址。资产的网址也有艺术品和数量。

当专辑进入视图时，我想从服务器获取专辑封面和照片计数，并将其显示在模式中。可能有数百张专辑，所以我不想一次加载它们。

最理想的情况是，我希望每个专辑<div>都会触发一个事件。我认为检测滚动会起作用，但在第一次加载时，从前6到前12的任何地方都将在视图中。如果有必要，我可以默认加载前12个，然后检查每个上滚动以查看它是否在视图中，但我宁愿不必这样做，因为我认为它不是非常有效。

<div class="album-list">
  <div class="album" *ngFor="let album of albums">
    <div class="album-title">{{album.title || ''}}</div>
    <div class="album-img"><img src="{{album.artworkUri || ''}}"/></div>
    <div class="album-count">{{album.count || ''}}</div>
  </div>
</div>

我正在尝试以非jquery方式考虑这个问题，因为我们在之前版本的应用程序中使用jquery来做这件事。

感谢任何帮助。