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

If you want to use the img tag instead of ion-img here is the solution:

  <img src="{{image.src}}" (load)="loaded = true" [ngClass]="{'img-loaded':loaded}" [hidden]="!loaded" *ngIf="image_exists" />
  <ion-spinner [ngClass]="{'center':true}" *ngIf="!loaded"></ion-spinner>

In your CSS file you should write the following:

 .img-loaded + ion-spinner {
  display:none;
}
// .center in my case to make the spinner at the center
.center{
  margin-left: auto;
  margin-right: auto;
  display: block;
}

loaded is a boolean variable with false default value you have to define in your component.

Your solution is not the best one because the app still downloads all the images, For example in a Facebook like app, You will be downloading all the images from the Feed to your app, This will make everything super slow.

Use this: https://github.com/NathanWalker/ng2-image-lazy-load

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!

Please use ionic-image-loader plugin

1. Install the NPM Package

   npm install --save ionic-image-loader
   

2. Install Required Plugins

   npm i --save @ionic-native/file
   
   ionic plugin add cordova-plugin-file --save
   
   npm i --save @ionic-native/transfer
   ionic plugin add cordova-plugin-file-transfer --save
   

3. Import IonicImageLoader module

   Add IonicImageLoader.forRoot() in your app's root module

   import { IonicImageLoader } from 'ionic-image-loader';
   
   // import the module
   @NgModule({
    ...
     imports: [
       IonicImageLoader.forRoot()
     ]
   })
   export class AppModule {}
   

   Then add IonicImageLoader in your child/shared module(s)

   import { IonicImageLoader } from 'ionic-image-loader';
   
   @NgModule({
   ...
     imports: [
       IonicImageLoader
     ]
   })
   export class SharedModule {}