角度2 - プリロード背景画像？

Question

私はページを塗りつぶす大きな背景イメージと、クリックすると（cdnの）別のイメージで背景のURLを変更するリンクを持つ簡単なサイドバーを持っています。これらの画像はかなり大きいので、読み込むには2〜2秒かかりますが、プレローダーを追加したいのですが、角度2でどのようにしたらよいか分かりません。

私のhtmlには次のものがあります：

generateImage(data: any){ 
    this.urlImage = 'http://example.com/mycdn/'+this.data.url+'.jpg'; 
} 

だから、URLが実際に変更されます。

<section class="fullsizebg image-bg" [ngStyle]="{'background-image': 'url(' + urlImage + ')'}"></section> 

変数urlImageは、コンポーネントとサイドバーのリンクのコンストラクタに移入さはそうのような単純な機能をクリック上のそれの値を変更します即座に画像が読み込まれます。私は画像の変更をユーザーにスムーズに保つために、今のように跳ね上がらないように、ローディングGIFなどを追加したいと思います。それは、画像を取得し、imgコンポーネントでそれを保存するために、あなたがロードプロセスに手を持って、あなたの読み込みGIFを追加することができ、このようにBlobを使用することです行うには

Answer 1

一つの方法：

@Component({ 
    selector:'loading-image', 
    template:'<img alt="foo" [src]="src"/>' 
}) 
export class ExampleLoadingImage{ 

    public src:string = "http://example.com/yourInitialImage.png"; 

    constructor(private http:Http){} 

    generateImage(data: any): void { 
     this.src = 'http://www.downgraf.com/wp-content/uploads/2014/09/01-progress.gif'; //Just a random loading gif found on google. 
     this.http.get('http://example.com/mycdn/'+this.data.url+'.jpg') 
     .subscribe(response => { 
      let urlCreator = window.URL; 
      this.src = urlCreator.createObjectURL(response.blob()); 
     }); 
    } 
} 

NB：コードに一貫性を持たせるには、データ入力パラメータを入力してください。anyはObjectのJavaなどのジョーカーとしてのみ使用してください。

Answer 2

イメージオブジェクト（Plunker Demo ⇗）

tmpImg: HTMLImageElement; // will be used to load the actual image before showing it 

generateImage(data: any){ 
this.urlImage = 'http://example.com/mycdn/'+ 'loading_GIF_url'; // show loading gif 

let loaded =() => { // wait for image to load then replace it with loadingGIF 
    this.urlImage = 'http://example.com/mycdn/' + this.data.url+'.jpg'; 
} 

// background loading logic 
if(this.tmpImg){ 
    this.tmpImg.onload = null; // remove the previous onload event, if registered 
} 
this.tmpImg = new Image(); 
this.tmpImg.onload = loaded; // register the onload event 
this.tmpImg.src = 'http://example.com/mycdn/'+this.data.url+'.jpg'; 
} 

Answer 3

を使用したこのソリューションは角何とブラウザが既に提供を活用しています。画像の読み込みはブラウザによって行われ、データやDOMを自分で混乱させる必要はありません。

私はこれをChrome 53でテストしましたが、問題なく動作しています。

これはあなたの要素であり、それはその背景が変更になっています：

<div class="yourBackgroundClass" [style.background-image]="'url(' + imgUrl + ')'"></div> 

が画像を先読みするために、我々は、イメージタグを使用し、それは表示されません。さらにposition: absoluteを作成してビューから移動したり、実際のコンテンツに干渉しないように非常に小さくしたりするとよいでしょう。 imgPreloadUrl設定を通じて

<img [src]="imgPreloadUrl" (load)="imgUrl = imgPreloadUrl" hidden> 

、imgのsrcは、角度によって更新され、ブラウザが見えないimgタグにイメージをロードしています。完了したらonloadが発火し、imgUrl = imgPreloadUrlに設定されます。 Angularは実際の背景のstyle.background-imageを更新し、背景画像は既に隠された画像に読み込まれているためすぐに切り替わります。私はそれをしようとするつもりですが、それは背景のサイズが可能にするために私のCSSを破るだろう

<button (click)="imgPreloadUrl = 'https://upload.wikimedia.org/wikipedia/commons/2/24/Willaerts_Adam_The_Embarkation_of_the_Elector_Palantine_Oil_Canvas-huge.jpg'">test</button>