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

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!

Answer 2

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 3

Please use ionic-image-loader plugin
Install the NPM Package
npm install --save ionic-image-loader
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
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 {}

Answer 4

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

Answer 5

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>';
}
}