contact@nusyce.com
+237 692 324 989 | 679 302 498
Demandez un devis
  • Accueil
  • Nos services
    • Création graphique
    • Application mobile
    • Création Site Web | Application Web
    • Marketing Digital
    • Intégration de solution métier
  • Portfolio
  • Nous contacter
  • Accueil
  • Nos services
    • Création graphique
    • Application mobile
    • Création Site Web | Application Web
    • Marketing Digital
    • Intégration de solution métier
  • Portfolio
  • Nous contacter
  • Accueil
  • Nos services
    • Création graphique
    • Application mobile
    • Création Site Web | Application Web
    • Marketing Digital
    • Intégration de solution métier
  • Portfolio
  • Nous contacter
  • Accueil
  • Nos services
    • Création graphique
    • Application mobile
    • Création Site Web | Application Web
    • Marketing Digital
    • Intégration de solution métier
  • Portfolio
  • Nous contacter
Blog
Application mobileIonic framework

Comment créer un preloader sur ionic 4

admin 18 octobre 2019 0 Comments



Le chargement progressif des images est une bonne pratique utilisé dans la création des applications. Son but est remplacer l’image à charger par un effet qui féra comprendre à l’utilisateur qu’une image est en cours de téléchargement. Dans cet article, nous allons voir comment créer un composant ionic 4 qui servira de « preloader » pour nos images.

#1: Création d’un composant

 Pour commencer, nous allons créer notre composant en utilisant la commande suivante :

ionic generate components components/preloader-image

Après avoir exécuter la commande précédente, notre composant preloader-image sera crée dans le dossiers src/app/components

#2: Implémentation

La séquence de fonctionnement d’un préloader est extrêmement simple. Elle consiste à remplacer l’image à afficher par une barre de chargement qui s’affichera durant le téléchargement de ce dernier.

  • Dans les fichiers de notre composant preloader qui ont été généré, nous allons nous rendre dans le fichier preloader-image.component.ts. Ici nous allons insérer le code ci-dessous :
import {Component, ElementRef, Input, OnChanges, OnInit, Renderer2, ViewEncapsulation} from '@angular/core';

@Component({
  selector: 'preloader-image',
  templateUrl: './preloader-image.component.html',
  styleUrls: ['./preloader-image.component.scss'],
  encapsulation: ViewEncapsulation.None,
})
export class PreloaderImageComponent implements OnChanges {
  _src = '';
  _ratio: { w: number, h: number };

  constructor(
      private _elementRef: ElementRef,
      private _renderer: Renderer2
  ) {}

  @Input() set src(val: string) {
    this._src = (val !== undefined && val !== null) ? val : '';
  }

  @Input() set ratio(ratio: { w: number, h: number }) {
    this._ratio = ratio || {w: 1, h: 1};
  }

  ngOnChanges() {
    const ratio_height = (this._ratio.h / this._ratio.w * 100) + '%';
    this._renderer.setStyle(this._elementRef.nativeElement, 'padding', '0px 0px ' + ratio_height + ' 0px');
    this._update();
  }

  _update() {
    this._loaded(false);
  }

  _loaded(isLoaded: boolean) {
    if (isLoaded) {
      setTimeout(() => {
        this._renderer.addClass(this._elementRef.nativeElement, 'img-loaded');
      }, 500);
    } else {
      this._renderer.removeClass(this._elementRef.nativeElement, 'img-loaded');
    }
  }
}

Dans notre fichier preloader-image.component.ts nous avons déclaré 2 paramètres que l’utilisateur devra passer au moment ou le composant sera appelé. Ces paramètres sont :

  1. ratio qui contiendra les proportions largeur et hauteur ({ w: number, h: number }) de l’image que nous allons afficher:
  2. src qui contiendra le lien de l’image à afficher.

Au début de notre composant, nous avons la déclaration selector: 'preloader-image' qui permet de spécifier le nom qui permettra d’identifier notre composant sur la vue.

  • Dans le fichier preloader-image.component.html nous allons insérer le code ci-dessous :
<ion-spinner class="spinner"></ion-spinner>
<ion-img [src]="_src" (ionImgDidLoad)="_loaded(true)"></ion-img>

Dans notre le fichier preloader-image.component.html nous déclarons un ion-spinner qui aura pour but d’afficher un chargement indéfini au niveau de la zone de chargement de l’image. Toujours dans ce fichier, nous déclarons aussi la balise ion-img qui nous permettra d’afficher l’image après son chargement.

Comment savoir que notre image à finir de se télécharger?

Grâce à la méthode (ionImgDidLoad)="_loaded(true)" présente dans ion-img nous avons la possibilité savoir si notre image à finir de se télécharger sur le serveur.

  • Dans le fichier preloader-image.component.scss nous allons insérer le code suivant pour l’application des mise en forme sur notre composant
$white: #FFFFFF;
$grey: #9e9e9e;

$preload-image-bg: rgba(darken($white, 10), .25);

$spinner-size: 28px;
$spinner-color: $grey;

preloader-image {
  display: block;
  background-color: $preload-image-bg;
  overflow: hidden;
  position: relative;
  width: 100%;

  .spinner {
    position: absolute;
    top: calc(50% - #{ ($spinner-size/2) });
    left: calc(50% - #{ ($spinner-size/2) });
    width: $spinner-size;
    height: $spinner-size;
    font-size: $spinner-size;
    line-height: $spinner-size;
    color: $spinner-color;
  }

  ion-img {
    position: absolute;
    top: 0;
    left: 0;
    transition: visibility 0s linear, opacity .5s linear;
    opacity: 0;
    visibility: hidden;
    width: 100%;
    height: 100%;
  }

  &.img-loaded {
    background-color: transparent;
    border: 0;

    ion-img {
      opacity: 1;
      visibility: visible;
    }

    .spinner {
      display: none;
      visibility: hidden;
    }
  }
}

#3: Résultat

Apres avoir suivi les étapes précédentes, nous allons maintenant voir comment appeler notre preloader sur une interface. Grâce à la balise suivant nous allons pouvoir ajouter les images dans notre projet en se servant du composant preloader que nous avons crée

            <preloader-image [ratio]="{w: 1, h: 1}" class="image" src="https://autoboot.tk/assets/img/400dpiLogo.png" >
</preloader-image>

Le but de cet article était de vous apprendre à créer un composant nommé preloader, qui vous permettra de créer un effet de chargement sur vos images. Ce composant vous présente aussi votre images selon un ration {w: 1, h: 1} offrant ainsi des proportion d’hauteur et largeur à l’image à afficher. Enfin, l’utilisation de ce dernier vous permettra d’enrichir l’expérience utilisateur de votre application.

30
1233 Views
Comment designer votre carte google mapPrevComment designer votre carte google map18 septembre 2019

Related Posts

Application mobileIonic framework

Comment faire un crud sur Ionic 4 + Php + MySql part 2

La partie 2 de cet article est consacré à la création de l’application mobile...

admin 15 août 2019
Application mobileIonic framework

Géolocalisation et GoogleMap avec ionic 4

De nos jours, avec la forte croissance de la technologie et la présence des radios GPS...

admin 8 septembre 2019

Laisser un commentaire Annuler la réponse

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Articles récents
  • Comment créer un preloader sur ionic 4
  • Comment designer votre carte google map
  • Géolocalisation et GoogleMap avec ionic 4
  • Comment ajouter une police d’écriture sur Ionic 4
  • Comment faire un crud sur Ionic 4 + Php + MySql part 2

NUSYCE est une agence numérique spécialisée dans le développement d'applications web et mobiles. Grâce aux technologies de pointe et un développement personnalisé, nous vous proposons la croissance par l'innovation.
Services
Création graphique
Application mobile
Intégration de solution
Développement d’application Web
Référencement SEO / SEA
Contacts
Adresse : Rond-point Dakar Immeuble Afriland Frist Bank Douala
Site Web: nusyce.com
Email: contact@nusyce.com
Tél: +237 692 324 989 | 679 302 498
Newsletter

VOS RÊVES, NOS RÉALISATIONS

Copyright © 2021 NUSYCE. All Rights Reserved.