如何在 Ion-card 上实现延迟加载

Question

所以我使用 ionic 和 firebase 数据，我必须加载很多数据。 由于要加载大量数据，因此并非所有图像都会出现（如您在屏幕截图中所见）。 那么......我应该怎么做，是否可以延迟加载带有数据的卡片。

这是我的代码

   <div *ngIf="postcall1">
      <ion-card (swipeleft)="goTochat(postscall1)" *ngFor="let postscall1 of postcall1">

        <img class="pP" src="https://ucarecdn.com/{{ postscall1.profilePic }}/-/scale_crop/200x200/center/" />

        <ion-img (press)="openOptionSheet(postcall1)" (click)="open(postscall1)"
          src="https://ucarecdn.com/{{postscall1.postboost1ID}}/-/preview/{{postscall1.effect}}"></ion-img>

       
        <ion-button mode="ios" class="this-button" color="light" fill="clear">
          <ion-icon slot="icon-only" [name]="heartType"></ion-icon>
        </ion-button>

      </ion-card>
    </div>

我要加载这 3 个 firebase 函数

 ngOnInit() {


    const postcall = this.aff.httpsCallable('postscall')
    this.sub = postcall({}).subscribe(data => {
      this.postcall = data

      console.log("postcall");
      console.log(this.postcall);
    })
    ///


    const postcall1 = this.aff.httpsCallable('postscall1')
    this.sub = postcall1({}).subscribe(data => {
      this.postcall1 = data

      console.log("postcall1");
      console.log(this.postcall1);
    })




  }

提前谢谢你

Answer 1

当您使用 Ionic 时，您将您的项目放在 Ion virtual scroll 中。

在文档中明确说明只会加载必要的元素。

For performance reasons, not every record in the list is rendered at once; instead a small subset of records (enough to fill the viewport) are rendered and reused as the user scrolls.

此代码未经测试，但必须符合预期。

<ion-virtual-scroll [items]="postcall1">
    <ion-card *virtualItem="let postscall1">
        <img class="pP" src="https://ucarecdn.com/{{ postscall1.profilePic }}/-/scale_crop/200x200/center/" />

        <ion-img (press)="openOptionSheet(postcall1)" (click)="open(postscall1)"
            src="https://ucarecdn.com/{{postscall1.postboost1ID}}/-/preview/{{postscall1.effect}}"></ion-img>

        
        <ion-button mode="ios" class="this-button" color="light" fill="clear">
            <ion-icon slot="icon-only" [name]="heartType"></ion-icon>
        </ion-button>
    </ion-card>
</ion-virtual-scroll>