Guillaume Le Mière Guillaume Le Mière - 3 months ago 274
Sass (Sass) Question

Ionic 2 : (Lazy) Loading spinner for pictures

I'm using ion-img in my ionic2 application to load my pictures correctly. However, I wonder if there is a way to indicate to the user that the picture is actually loading.

Thank you for your help!

Answer

I finally solved that problem with CSS! When an image is loading in ionic 2, the ion-img tag doesn't have any class. However, when the image is finally loaded, the ion-img tag get the class "img-loaded".

Here is my solution :

  <ion-img [src]="img.src"></ion-img>
  <ion-spinner></ion-spinner>

And my CSS :

.img-loaded + ion-spinner {
  display:none;
}

I hope it can help someone!

Comments