Comment charger une image avec spinner dans angular2

mon application a de nombreuses images avec des descriptions. Lorsque l'utilisateur accède à ces texte vient en premier et l'image est en cours de chargement avec un peu de retard. Je voudrais ajouter un compteur ici. Une directive qui montre spinner pendant le chargement de l'image et montre l'image comme

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

Comment ajouter spinner et la piste de l'image est chargée ou non, et de l'afficher?

webcake.co/un-chargement-spinner-en-angulaire-2-aide-ngswitch , cochez cette ce sera peut-guide de l'u..

OriginalL'auteur Mujibur Rahman | 2016-06-21

  1. 11

    Dans votre contrôleur, ajouter une fonction pour gérer le 'onLoad' événement, le réglage de l'état de {loading: false}:

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

    Dans votre modèle, rendre un chargement de gif (ou ce que vous voulez), alors que l'état a loading === true, la partie difficile est que vous devriez juste cacher le img élément avec [hidden]="true/false" par opposition à l'empêcher de rendu, donc il va charger les src, puis il suffit de lier le onLoad fonction de votre contrôleur à l' (load) événement 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 identique à AngJobs, mais il est plus déclaratif et un peu moins lourd de l'OMI.

    PS: à l'Aide de [hidden]="boolean" au lieu de *ngIf est un peu une chasse aux sorcières, vous devriez regarder pour http://angularjs.blogspot.com/2016/04/5-rookie-mistakes-to-avoid-with-angular.html de comprendre pourquoi et pour une solution sur la façon de l'appliquer en toute sécurité.

    Votre 2ème bloc de code un peu bizarre. Vous semblez passer angulaire de liaisons pour un img(...) appel de fonction.
    C'est une erreur, je n'ai pas préciser que j'utilisais jade/pug de la syntaxe. Ce bloc que vous mentionnez est de balisage, pas de JavaScript, je vais le modifier pour utiliser la syntaxe HTML
    Je vois. Jamais utilisé moi-même.
    Pensez-vous que cela pourrait être une directive que vous utilisez sur plusieurs images?

    OriginalL'auteur perezperret

  2. 2

    Vous n'avez pas besoin d'une fonction ici, il suffit d'ajouter à vos composants:

    imageLoader = true;

    Dans le modèle d'ajouter les éléments suivants:

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

    ... comme vous le voyez, il y a du texte à la place d'un gif dans la mesure où en fait une animation de chargement gif aussi doit être chargé. Dans certains cas, cela pourrait prendre beaucoup plus de temps, que le chargement de 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;" />

    OriginalL'auteur Peter Schuhknecht

  3. 1

    L'idée est d'afficher la touche de navigation par défaut, créer un objet Image à afficher lorsque la charge est complète

     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);

    OriginalL'auteur AngJobs on Github

  4. 1

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

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

    OriginalL'auteur Peter