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

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个图像时，滑块才能正常工作。当图像数量增加app会崩溃。

请给我解决方案！

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"，你想要延迟加载图像。

我自己测试过，效果很好。