angle2でスピナーを使用して画像を読み込む方法

Question

私のアプリは説明付きで多くの画像を取得しました。ユーザーがナビゲートすると、これらのテキストが最初に表示され、画像が若干遅れて読み込まれます。ここにスピナーを追加したいと思います。画像をロード中にスピナーを示し、スピナーを追加して、画像を追跡するためにどのように

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

のようなイメージを示しディレクティブがロードされてかどうか、それを表示していますか？

Answer 1

アイデアは、デフォルトでスピナーを表示負荷があなたのコントローラで

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

完了したときに表示される独立したImageオブジェクトを作成し、「へのonLoad」イベントを処理するための機能を追加することです{loading: false}に状態を設定する：あなたのテンプレートでは

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

、状態はloading === trueを有しているロードGIF（またはものは何でもしたい）をレンダリングし、トリッキーな部分は、あなただけのでimg要素を非表示にすることですので、それが実際にsrcをロードしますレンダリングするからそれを防ぐために対立するものとして、そしてちょうど実際の画像に(load)イベントにあなたのコントローラでonLoad機能をバインド：

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

このソリューションは、機能的にAngJobs年代と同じであり、しかし、それはより宣言的で、少し煩わしいIMOです。

PS：*ngIfの代わりに[hidden]="boolean"を使用するとちょっとした問題です。http://angularjs.blogspot.com/2016/04/5-rookie-mistakes-to-avoid-with-angular.htmlを見て、それを安全に適用する方法を解説してください。

Answer 3

最も簡単な方法は、onErrorイベントをimg要素に使用することです。

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