如何在离子滑块中延迟加载图像？

Question

我有很多设备库本地图像路径，我正在使用Ionic PhotoLibrary进行检索。然后，我尝试使用以下离子滑块显示这些图像：

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

在哪里，
图像 是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" 您要延迟加载图像的位置。

我自己进行了测试，效果很好。