角度2-预加载背景图像？

Question

我有一个angular项目，其中有一个大的背景图像，填充页面，还有一个简单的侧边栏，其中包含链接，单击后，会将背景的url更改为另一个图像（来自cdn）。由于这些图像相当大，需要一两秒钟才能加载，这很明显，我想添加一个预加载程序，但我不确定如何在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或类似的东西，以保持图像更改对用户来说很流畅，而不是像现在这样跳来跳去。

Answer 1

使用图像对象(Plunker演示⇗)

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 2

这个解决方案利用了angular和浏览器已经提供的功能。图像加载由浏览器完成，不需要自己处理任何数据或DOM。

我已经在Chrome53上测试过了，它工作得非常完美。

这是你的元素，它正在改变它的背景：

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

为了预取图像，我们使用未显示的图像标记。最好将其＜code＞位置设置为绝对

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

通过设置imgPreloadUrl，img的src被angular更新，浏览器将图像加载到不可见的img标签中。完成后，onload触发，我们设置imgUrl=imgPreloadUrl。Angular现在更新实际背景的style.background图像，背景图像立即切换，因为它已经加载到隐藏图像中。

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

Answer 3

一种方法是使用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());
         });
    }
}

注意：你应该输入你的数据参数，键入是确保代码一致性的好方法，任何类型都应该只用作小丑，就像Java中的Object一样。