Angular 2 - 預加載背景圖片？

我有這個角度項目，我有一個大的背景圖片，填充頁面和一個簡單的邊欄，點擊鏈接後，將改變另一個圖像（從CDN）的背景的網址。由於這些圖像相當大，他們需要一兩個或兩個加載，這是顯而易見的，我想添加一個預加載程序，但我不知道這將如何做角2。Angular 2 - 預加載背景圖片？

在我的html我有這樣的：

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

變量urlImage填充在組件和側邊欄鏈接的構造改變了它在點擊的價值用一個簡單的功能，像這樣：

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

所以URL實際上是在改變立即但圖像需要加載一點。我想添加一個加載gif或類似的東西，以保持圖像更改順利的用戶，而不是像現在這樣跳動。

來源

2016-09-23 Elaine Marley

一種方式做到這一點是使用Blob來獲取圖像，並將其存儲在一個img組件，這樣你對加載過程你的手，你可以添加你加載GIF：

@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。

來源

2016-09-23 08:54:01 Supamiu

我要去嘗試，但它會打破我的CSS使背景的大小是封面，我不知道如何做到這一點，我一直使用jQuery的。 –

你應該尋找CSS讓img成爲一個固定的背景，因爲實現你想要的東西的唯一方法就是用這種方式來做，使用blob。 – Supamiu

好吧，這比背景問題更重要，我會看到我如何排序，將嘗試你的方法 –

使用圖像對象（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'; 
}

來源

2016-09-26 09:28:08

該解決方案利用什麼角度和瀏覽器已經提供。圖像加載是由瀏覽器完成的，不需要自己弄亂任何數據或DOM。

我已經在Chrome 53上測試過它，它的工作完美無瑕。

這是你的元素，那就是獲取其背景變了：

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

預取的圖像中，我們使用圖像標籤，未顯示。另外製作它的position: absolute並將它移出視圖或使它變得非常小，這樣它就不會干擾你的實際內容。

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

通過設置imgPreloadUrl，所述img的src由角更新，瀏覽器將圖像加載到無形img標籤。一旦完成，onload火災，我們設置imgUrl = imgPreloadUrl。 Angular現在更新了實際背景的style.background-image，並立即切換背景圖像，因爲它已經加載到隱藏圖像中。

雖然imgUrl !== imgPreloadUrl我們可以顯示一個微調，以指示載荷：

<div class="spinner" *ngIf="imgUrl !== imgPreloadUrl"></div>

測試用：

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

來源

2016-10-01 09:06:45 j2L4e

Angular 2 - 預加載背景圖片？

回答

相關問題