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

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

自己测试过，效果很好。