javascript - 如何防止从服务器端加载图像

Question

我有带图像的 API 数据，但由于互联网问题或其他原因，图像需要太多时间才能完全加载。

有什么方法可以防止这种加载，因为当所有数据都加载完并且图像仍然需要时间显示时它看起来很糟糕。

menu.html

<ion-card class="categories_item" *ngFor="let category of categories; let i = index;">
  <ion-grid>
    <ion-row>
      <ion-col size-md="2" size="4" class="img-zoom" align-self-center>
        <img [src]="category?.Picture1" (click)="imgView(category?.Picture1)" id="imgClickAble"
          class="imgClickAble" />
          .....
      </ion-col>

      <ion-col size-md="9" size="6" (click)="goToitemCategory(category.ID)">
        .....
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-card>

我需要显示其他内容，直到像占位符一样加载完整图像，或者我想缓存图像以供将来使用。

Answer 1

您可以隐藏原始图像并在循环中使用占位符图像并调用原始图像onload 函数来隐藏占位符图像并显示实际图像

<img src="placeholderurl" id="placeholder_{{i}}" >

<img [src]="category?.Picture1" class="hidden" id="original_{{i}}" (load)="onImageLoad(i)">

你的 onimageload 函数看起来像

onImageLoad(idx){
  var orginalEle=document.getElementById(`original_${idx}`)
  var placeHolderEle=document.getElementById(`placeholder_${idx}`);
  placeHolderEle.classList.add('hidden');
  orginalEle.classList.remove('hidden');
}

Demo