Wie Bild mit Spinner in angular2 geladen

Question

meine App hat viele Bilder mit Beschreibungen. Wenn der Benutzer navigiert, kommt dieser Text zuerst und das Bild wird mit einiger Verzögerung geladen. Ich möchte hier einen Spinner hinzufügen. Eine Richtlinie, die Spinner zeigt, während das Bild geladen und zeigt Bild wie

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

Wie Spinner hinzuzufügen und zu verfolgen das Bild geladen ist oder nicht und anzeigen?

Answer 1

Die Idee ist, den Spinner standardmäßig angezeigt werden, ein separates Image-Objekt erstellen, die angezeigt werden würden, wenn die Last

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

Answer 2

In Ihrem Controller abgeschlossen ist, fügen Sie eine Funktion, um das ‚onLoad‘ Ereignis zu behandeln, den Staat zu {loading: false} Einstellung:

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

in Ihrer Vorlage machen eine Lade gif (oder was auch immer Sie wollen), während der Zustand loading === true hat, der schwierige Teil ist, dass Sie nur das img Element verstecken mit [hidden]="true/false" im Gegensatz zu verhindern, dass zu machen, damit es tatsächlich die src lädt, dann binden Sie einfach die onLoad Funktion in der Steuerung mit dem (load) Ereignisse auf dem tatsächlichen Bild:

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

Diese Lösung funktionell die gleiche wie AngJobs der ist, aber es ist deklarativer und ein bisschen weniger umständlich IMO.

PS: Mit [hidden]="boolean" anstelle von *ngIf ist ein bisschen eine Frage, sollten Sie zu http://angularjs.blogspot.com/2016/04/5-rookie-mistakes-to-avoid-with-angular.html zu verstehen, warum und für eine Lösung, wie man es sicher anwenden.

Answer 3

Ich denke, der einfachste Weg ist, das Ereignis onError auf dem Element img zu verwenden. Sie können es mögen verwenden:

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