web-dev-qa-db-fra.com

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

J'utilise ion-img dans mon application ionic2 pour charger correctement mes photos. Cependant, je me demande s'il existe un moyen d'indiquer à l'utilisateur que l'image est en train de se charger.

Merci de votre aide!

EDIT: Voici la réponse si vous devez absolument utiliser la balise ion-img. Sinon, vous devez utiliser ionic-image-loader comme AdminDev826 suggéré.

J'ai finalement résolu ce problème avec CSS! Lorsqu'une image se charge dans ionic 2, la balise ion-img n'a pas de classe. Cependant, lorsque l'image est finalement chargée, la balise ion-img obtient 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!

mobileangulartypescriptsassionic2
12
Guillaume Le Mière

Veuillez utiliser le plugin ionic-image-loader

  1. Installer le package NPM

    npm install --save ionic-image-loader

  2. Installez les plug-ins requis

    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. Importer le module IonicImageLoader

    Ajoutez IonicImageLoader.forRoot () dans le module racine de votre application

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

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

    Ajoutez ensuite IonicImageLoader dans vos modules enfant/partagé (s)

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

@NgModule({
...
  imports: [
    IonicImageLoader
  ]
})
export class SharedModule {}
10
AdminDev826

J'ai finalement résolu ce problème avec CSS! Lorsqu'une image se charge dans ionic 2, la balise ion-img n'a pas de classe. Cependant, lorsque l'image est finalement chargée, la balise ion-img obtient 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!

13
Guillaume Le Mière

Si vous souhaitez utiliser la balise img 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 ce qui suit:

 .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 une fausse valeur par défaut que vous devez définir dans votre composant.

9
M Fouad Kajj

Votre solution n'est pas la meilleure car l'application télécharge toujours toutes les images, par exemple dans une application de type Facebook, vous téléchargerez toutes les images du flux vers votre application, cela rendra tout très lent.

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

3
Yossi Neiman