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

ionic-image-loader not works in ionic4+. You must create a component:

HTML

<ion-spinner name="dots" [hidden]="viewImage" color="primary"></ion-spinner>
<ion-img #image alt=""(ionImgDidLoad)="loadImage()" (ionError)="errorLoad()"></ion-img>

Typescript

    @Component({
      selector: 'preloader-img',
      templateUrl: './preloader-img.component.html',
      styles: [`
        ion-spinner {
          display: block;
          margin: auto;
        }
      `],
    })
    export class PreloaderImgComponent implements AfterViewInit {
      viewImage = false;

      @Input() url: string;
      @ViewChild('image', { static: false }) imageRef: IonImg;


      ngAfterViewInit() {
        this.imageRef.src = this.url;
      }
      loadImage() {
        this.viewImage = true;
      }
      errorLoad() {
        this.imageRef.src = '<your_default_img>';
      }
    }

Answer 2

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 3

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.

Answer 4

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 {}