Изображения Ленивая Загрузка Ionic 3 - PullRequest
0 голосов
/ 29 октября 2018

Я получаю более 750 изображений с сервера разных размеров. И мне нужны некоторые хитрости, чтобы загружать изображения с меньшим временем. Я использую пакет ionic-image-loader npm. Хотя загрузка улучшается, но все же загрузка всех изображений занимает более 10 секунд. Я не хочу загружать все изображения одновременно. Я хочу загрузить изображения, которые в данный момент отображаются.

Вот мой код

ts file

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 секунд с этого

enter image description here

до

enter image description here

что должно улучшить загрузку изображений. Есть предложения?

...