图像懒加载Ionic 3

Question

我从不同大小的服务器上获取了750多个图像。我需要一些技巧来以较少的时间加载图像。我正在使用 ionic-image-loader npm软件包。虽然加载 进行了改进，但加载所有图像仍需要10秒钟以上。我不想一次加载所有图像。我要加载当前正在查看的图像。

这是我的代码

ts文件

jsonData = null;
mobileImagesURL: string = 'https://solemole.com/uploads/product/';
mobileData: Array<MobileDataModel>;
filterStatus: string = '';

constructor(
    public navCtrl: NavController,
    public navParams: NavParams,
    private backend: BackendProvider,
    public event: Events,
    private imageLoader: ImageLoader
){ }

ngOnInit()
{
    this.mobileData = new Array<MobileDataModel>();
    if(!this.jsonData)
    this.backend.getMobilesData().subscribe((res) =>
    {
      this.mobileData = res.data;
    }, (error) =>
    {
      console.error('mobiles list post error', error)
    });
}

refresh(refresher)
{
    console.log("refreshing...");

    this.imageLoader.clearCache();
    refresher.complete();
}

html文件

<ion-header>
  <ion-navbar color="menu">
    <ion-title>Mobiles List</ion-title>
    <button right ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
  </ion-navbar>
</ion-header>
<ion-content>
  <ion-searchbar ion-fixed [(ngModel)]="filterStatus" placeholder="Search Model or IMEI"></ion-searchbar>
  <ion-refresher (ionRefresh)="refresh($event)">
    <ion-refresher-content
      refreshingSpinner="circles"
      snapbackDuration = 2000>
    </ion-refresher-content>
  </ion-refresher>
  <ion-list>
    <ion-item (click)="phoneDetails(mobileData, i)" *ngFor="let phone of mobileData | searchMobile: filterStatus: 'name': 'imei': 'model'; index as i">
      <ion-avatar item-start>
        <img-loader [src]="mobileImagesURL + phone.id + '/' + phone.thumbnail" useImg></img-loader>
      </ion-avatar>
      <div style="display: flex; justify-content: space-between;">
        <h2>{{phone.name}} {{phone.model}}</h2>
        <p>{{phone.date}}</p>
      </div>
      <p><strong>Price:</strong> {{phone.price}}</p>
    </ion-item>
  </ion-list>
</ion-content>

此过程几乎要花10秒

到

应采取哪些措施来改善图像加载。有什么建议吗？