Я получаю более 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 секунд с этого
до
что должно улучшить загрузку изображений. Есть предложения?