Use ion spinner while img loads


#1

Like the title says, is there a way to know when an img is currently loading so I can make use of the ion-spinner?

Here is what I currently have…

<ion-list>
    <ion-item *ngFor="let item of items" button menuClose (click)="pushNav(item.table, item.ID)">

      <ion-thumbnail *ngIf = "item.noimg; else elseBlock" item-start>
        <img src="{{item.featured}}">
      </ion-thumbnail>

      <ng-template #elseBlock>

        <ion-thumbnail>
          <img src="{{item.pics[0]}}">
        </ion-thumbnail>

      </ng-template>

This is what I am looking for…


      <ion-thumbnail>
          <ion-spinner *ngif="imgIsLoading">
</ion-spinner>

          <img *ngif="imgIsDoneLoading" src="{{item.pics[0]}}">
       </ion-thumbnail>

…or if there is a similar way please do share!


#2

You could lazy load your images using something like this https://github.com/tjoskar/ng-lazyload-image