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 :

ratio qui contiendra les proportions largeur et hauteur ({ w: number, h: number }) de l’image que nous allons afficher:
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.