Ionic 2 / Ionic 3 / Ionic 4: (Lazy) Spinner de chargement pour les images

Je suis à l'aide d'ions img dans mon ionic2 application à charger mes photos correctement. Cependant, je me demande si il existe un moyen pour indiquer à l'utilisateur que l'image est en fait le chargement.

Merci pour votre aide!

EDIT : Voici la réponse si vous devez absolument utiliser l'ion-balise img. Si non, vous devez utiliser ionique-image-chargeur comme AdminDev826 suggéré.

J'ai finalement résolu le problème avec le CSS! Lorsqu'une image est en cours de chargement dans ionique 2, l'ion-balise img n'a pas toute la classe. Toutefois, lorsque l'image est enfin chargé, le ion-balise img obtenir la classe "img-chargé".

Voici ma solution :

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

Et mon CSS :

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

J'espère que cela peut aider quelqu'un!

source d'informationauteur Guillaume Le Mière

  1. 9

    Veuillez utiliser ionique-image-chargeur de plugin

    1. Installer le Package NPM

      npm install --save ionic-image-loader

    2. Installer Les Plugins Nécessaires

      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. Importation IonicImageLoader module

      Ajouter IonicImageLoader.forRoot() dans votre application racine du module

      import { IonicImageLoader } from 'ionic-image-loader';

//import the module
@NgModule({
 ...
  imports: [
    IonicImageLoader.forRoot()
  ]
})
export class AppModule {}

      Puis ajouter IonicImageLoader de votre enfant/shared module(s)

      import { IonicImageLoader } from 'ionic-image-loader';

@NgModule({
...
  imports: [
    IonicImageLoader
  ]
})
export class SharedModule {}
  2. 13

    J'ai finalement résolu le problème avec le CSS! Lorsqu'une image est en cours de chargement dans ionique 2, l'ion-balise img n'a pas toute la classe. Toutefois, lorsque l'image est enfin chargé, le ion-balise img obtenir la classe "img-chargé".

    Voici ma solution :

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

    Et mon CSS :

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

    J'espère que cela peut aider quelqu'un!

  3. 7

    Si vous souhaitez utiliser le img tag au lieu de ion-img voici la 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>

    Dans votre fichier CSS, vous devez écrire le code suivant:

     .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 est une variable booléenne avec de la fausse valeur par défaut, vous devez définir dans votre composant.

  4. 3

    Votre solution n'est pas optimale, car l'application télécharge toutes les images, Par exemple dans un Facebook comme l'app, Vous serez à télécharger toutes les images à partir de l'Alimentation de votre application, Ce qui mettra tout en super lent.

    Utiliser ceci:
    https://github.com/NathanWalker/ng2-image-lazy-load