Как лениво загружать изображения в ионный слайдер?

Question

У меня много путей к локальным изображениям галереи устройств, которые я получаю, используя Ionic PhotoLibrary .Затем я пытаюсь отобразить эти изображения с помощью ионного ползунка, как показано ниже:

<ion-slides>
     <ion-slide *ngFor="let img of images">
          <img [src]="img.photoURL | cdvPhotoLibrary"/>
     </ion-slide>
</ion-slides>

Где,
images - это массив LibraryItem.Тогда photoURL содержит cdvfilepath:// изображений.

Но ползунок работает нормально только при наличии 2-3 изображений.При увеличении количества изображений приложение вылетает.

Пожалуйста, дайте мне решение !!!

Answer 1

Вы можете использовать библиотеку ng-lazyload-image.

установить ее через npm install ng-lazyload-image --save

и затем объявить ее в app.module.ts как

import { LazyLoadImageModule, intersectionObserverPreset } from 'ng-lazyload-image';

и добавьте его в импорт

LazyLoadImageModule.forRoot({
    preset: intersectionObserverPreset
  })

Затем просто добавьте [lazyLoad]="image" вместо src="image", куда вы хотите лениво загрузить изображение.

Протестировал его сам и он отлично работает.