Ionic v4 ion-img 急切地加载图像而不是延迟加载答案

【问题标题】：Ionic v4 ion-img eagerly loads the images instead of lazy-loadingIonic v4 ion-img 急切地加载图像而不是延迟加载
【发布时间】：2019-02-20 17:04:53
【问题描述】：

我有一个使用FlexLayoutModule 构建的水平滚动器，基本上让我有一个水平滚动列表，其中每个项目都是一列图像和文本。这是我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>

但是当页面加载时，所有数百个图像请求都会被触发，我可以从网络选项卡以及我的 API 报告中看到我有数百个待处理的请求并且我已经达到了速率限制。也许我没有正确使用 ion-img 或者某些样式弄乱了它？这是我的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;
}

我愿意接受建议。也许我应该使用virtual-scroll？但我不知道如何才能将其设为水平。

【问题讨论】：

标签： css ionic-framework ionic4

【解决方案1】：

我使用ion-slide 完成了这种设计。最好做一些 scss 更改以显示下一个元素的部分。请看下面的代码。

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;
      }
    }
  }
}

这就是它的样子。

这对我来说很好，有大量数据。希望这对其他人有帮助。

【讨论】：