I recently created a horizontal scroller using FlexLayoutModule. It allows me to display a horizontally scrollable list where each item consists of an image and text column. Here's the relevant snippet 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>
However, upon loading the page, I noticed that numerous image requests are being triggered simultaneously. This is causing rate-limiting issues with my API due to the excessive number of pending requests. Could the problem stem from how I'm utilizing ion-img or perhaps some conflicting styles in my scroller.component.scss? Here's the CSS code:
.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 am open to suggestions on how to optimize this. Would implementing virtual-scroll be a viable solution? I'm unsure how I could maintain the horizontal scrolling capability with virtual scrolling.