Ленивая загрузка галереи изображений

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

Вам нужно взглянуть на то, что называется Intersection Obsever (https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API). Я бы определенно предложил использовать внешнюю библиотеку, например, lozad.js. См. https://github.com/ApoorvSaxena/lozad.js

Answer 2

Если вы используете angular, я создал библиотеку для ленивой загрузки галереи. Вы можете использовать эту библиотеку на npm: https://www.npmjs.com/package/ng-opengallery. Доступна демоверсия. Это тоже с открытым исходным кодом, вы можете проверить репо и адаптировать его под свои нужды. Ура