web-dev-qa-db-fra.com

Comment charger une image avec spinner dans angular2

mon application a beaucoup d'images avec des descriptions. Lorsque l'utilisateur navigue, ce texte arrive en premier et l'image se charge avec un certain retard. Je voudrais ajouter un spinner ici. Une directive qui montre spinner lors du chargement de l’image et montre une image comme

<myimgdir [src]='myimage.png'></myimgdir>

Comment ajouter spinner et suivre l'image est chargée ou non et l'afficher?

angularangular2-directives
5
Mujibur Rahman

Dans votre contrôleur, ajoutez une fonction à pour gérer l'événement 'onLoad', en définissant l'état sur {loading: false}:

loading: boolean = true
onLoad() {
    this.loading = false;
}

Dans votre modèle, restituez un gif de chargement (ou ce que vous voulez) alors que l'état a loading === true, la partie délicate est que vous devez simplement masquer l'élément img avec [hidden]="true/false" au lieu de l'empêcher de s'afficher pour qu'il charge réellement le src, liez simplement la fonction onLoad de votre contrôleur à l'événement (load) sur l'image réelle:

<img *ngIf="loading" src="/assets/loading.gif" alt="loading" />
<img [hidden]="loading" (load)="onLoad()" src="{{ source }}" />

Cette solution est fonctionnellement la même que celle d’AngJobs, mais elle est plus déclarative et un peu moins lourde, OMI.

PS: Utiliser [hidden]="boolean" au lieu de *ngIf est un peu un piège, vous devriez regarder http://angularjs.blogspot.com/2016/04/5-rookie-mistakes-to-avoid-with-angular.html comprendre pourquoi et trouver une solution pour l’appliquer en toute sécurité.

9
perezperret

L'idée est d'afficher le compteur par défaut, créer un objet Image séparé qui serait affiché une fois le chargement terminé.

 var img = new Image();

    /// set handler and url
    img.onload = onloadHandler;
    img.src = imageURLs[i];

    /// if image is cached IE (surprise!) may not trigger onload
    if (img.complete) onloadHandler().bind(img);
1
AngJobs on Github

Je pense que le moyen le plus simple est d'utiliser l'événement onError sur l'élément img Vous pouvez l'utiliser comme:

<img [src]="image.src" onError="this.src='assets/my/fancy/loader.gif';">
1
Peter

Vous n'avez pas besoin d'une fonction ici, ajoutez simplement à votre composant:

imageLoader = true;

Dans le modèle, ajoutez ce qui suit:

<div [hidden]="!imageLoader">Loading...</div>
<img [hidden]="imageLoader" src=".../image.png" (load)="this.imageLoader = false;" />

... comme vous le voyez, il y a du texte au lieu d'un gif car en fait, une animation de chargement gif doit également être chargée. Dans certains cas, cela peut prendre beaucoup plus de temps que de charger l'image elle-même.

Si le gif est déjà chargé, vous pouvez utiliser:

<img [hidden]="!imageLoader" src=".../loading_spinner.gif" />
<img [hidden]="imageLoader" src=".../image.png" (load)="this.imageLoader = false;" />
1
Peter Schuhknecht