Ionic v4 ion-img会积极加载图像，而不是延迟加载

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.