Comment créer un preloader sur ionic 4

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.