时间戳

首页 > 解决方案 > 延迟加载图片库

angular - 延迟加载图片库

问题描述

我从服务中收到一个带有图像和一些详细信息的对象。

有一种方法可以使用延迟加载来加载图库。我打算在滚动时缓慢加载图像，而不是一次加载所有图像。

有人能帮我吗？

演示

HTML

  <ul class="mdc-image-list my-image-list">
    <ng-container *ngFor="let product of data; let  j = index;">
      <li class="mdc-image-list__item">
        <div class="mdc-image-list__image-aspect-container">
            <img [src]="product.image" class="mdc-image-list__image">
        </div>
      </li>
    </ng-container>
  </ul>

标签： angulartypescriptangular-materiallazy-loadingimagelist

解决方案

如果您使用 Angular，我已经构建了一个库来延迟加载图库。你可以在 npm 上使用这个库：https ://www.npmjs.com/package/ng-opengallery有一个可用的演示。它也是开源的，您可以检查 repo 并根据您的需要进行调整。干杯

推荐阅读