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

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"

自己测试过，效果很好。