web-dev-qa-db-ja.com

angular2のスピナーで画像をロードする方法

私のアプリには説明付きの画像がたくさんあります。ユーザーがナビゲートすると、これらのテキストが最初に来て、画像は少し遅れてロードされます。ここにスピナーを追加します。画像の読み込み中にスピナーを表示し、画像を表示するディレクティブ

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

スピナーを追加して画像が読み込まれたかどうかを追跡して表示する方法は？

angularangular2-directives
11
Mujibur Rahman

コントローラーで、「onLoad」イベントを処理する関数を追加し、状態を{loading: false}に設定します。

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

テンプレートで、ロードgif（または必要なもの）をレンダリングしますが、状態はloading === trueですが、トリッキーな部分は、img要素を[hidden]="true/false"で非表示にするだけです。実際にsrcをロードするようにレンダリングしないようにしてから、コントローラーのonLoad関数を実際の画像の(load)イベントにバインドします。

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

このソリューションは機能的にはAngJobsのソリューションと同じですが、宣言型であり、IMOの扱いが少し面倒ではありません。

PS：[hidden]="boolean"の代わりに*ngIfを使用するのは少しおかしなことです。次の点に注意してください http://angularjs.blogspot.com/2016/04/5-rookie-mistakes- to-avoid-with-angular.html 理由を理解し、安全にそれを適用する方法の解決策について。

14
perezperret

ここでは関数は必要ありません。コンポーネントに追加するだけです。

imageLoader = true;

テンプレートに以下を追加します：

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

...ご覧のように、gifの代わりにテキストがあります。実際には、ロードアニメーションgifもロードする必要があるためです。場合によっては、画像自体をロードするよりもはるかに時間がかかることがあります。

Gifが既に読み込まれている場合は、次のコマンドを使用できます。

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

アイデアは、デフォルトでスピナーを表示し、ロードが完了したときに表示される個別のImageオブジェクトを作成することです

 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

最も簡単な方法は、img要素でonErrorイベントを使用することだと思います。次のように使用できます。

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