Ionic v4 ion-img eagerly loads the images instead of lazy-loading - css

Question

I have a horizontal scroller that I built with FlexLayoutModule that basically let's me have a horizontally scrollable list where every item is a column of image and text. Here's the relevant code from my scroller.component.html
<div class="ion-activatable container" fxLayout="column" fxLayoutAlign="start center" fxLayoutGap="10px" *ngFor="let item of items">
<ion-ripple-effect></ion-ripple-effect>
<div *ngIf="item.movie || item.title" [routerLink]="'/tabs/discover/movie/'+ (item.movie? item.movie.ids.tmdb: item.ids.tmdb)">
<ion-img class="poster" [src]="(images$[item.movie? item.movie.ids.tmdb: item.ids.tmdb] | async) || preloaderGif"></ion-img>
<div class="item-titles">
{{item.movie? item.movie.title: item.title}}
</div>
</div>
</div>
But when the page loads up, all the hundreds of image requests are fired which I can see from the network tab as well as my API reporting I have hundreds of pending requests and that I have hit rate-limiting. Maybe I'm not using the ion-img right or maybe some of the styles are messing with it? Here's my scroller.component.scss:
.horizontal {
white-space: nowrap;
overflow-x: auto;
}
.poster {
width: 92px;
height: 138px;
}
.container {
position: relative;
cursor: pointer;
user-select: none;
}
.item-titles {
width: 100px;
white-space: normal;
text-align: center;
}
I'm open to suggestions. Maybe I should use virtual-scroll? But I don't see how I can make that horizontal.

Answer 1

I have done this kind of design using ion-slide. Better to do some scss change to show the part of next element. Please have a look following code.
Html
<ion-slides [options]="slideOpts" class="recent-search">
<ion-slide *ngFor="let item of recentSearch" class="slide-container" float-left text-left>
<div class="history-item" (click)="gotoDetailPage(item.id)">
<div class="container" float-left text-left>
<div class="bold-text">{{item.companyName}}</div>
<div>{{item.productName}}</div>
<div>{{item.descriptor}}</div>
</div>
</div>
</ion-slide>
</ion-slides>
Scss
.slide-container {
.history-item {
width: 100%;
padding: 3px;
.container {
padding: 15px;
background-color: #fafafa;
box-shadow: 2px 2px 11px 3px rgba(0, 0, 0, 0.12);
width: 80%;
font-size: 12px;
color: #767676;
.bold-text {
font-weight: 700;
}
div {
padding: 4px 0;
}
}
}
}
This is how it looks like.
This works nice for me with huge list of data.
Hope this may help to someone else.