延迟加载图片库

Question

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

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

有人可以帮我吗？

DEMO

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>

Answer 1

[如果您使用的是角度，我已经建立了一个库来延迟加载画廊。您可以在npm上使用此库：https://www.npmjs.com/package/ng-opengallery有一个可用的演示。它也是开源的，您可以检查存储库并使其适应您的需求。干杯

Answer 2

您需要看一下所谓的“相交观察”（https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API）。我绝对建议使用外部库，例如lozad.js。参见https://github.com/ApoorvSaxena/lozad.js