如何在 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 function 要加载

 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>