mobile - Ionic 2 / Ionic 3 / Ionic 4 : (Lazy) Loading spinner for pictures

Question

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!

EDIT : Here is the answer if you absolutely need to use the ion-img tag. If not, you should use ionic-image-loader as AdminDev826 suggested.

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!

Answer 1

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!