如何在angular2中使用微调器加载图像

Question

我的应用程序收到了很多带有描述的图片。当用户导航时，这些文本会先出现，而图像的加载会有一些延迟。我想在这里添加一个旋转器。一个指令，它在加载图像时显示微调器，并显示图像，如下所示

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

如何添加微调器，跟踪图像是否加载并显示？

Answer 1

在控制器中，添加一个函数来处理“onLoad”事件，将状态设置为{loading: false}

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

在你的模板中，渲染一个加载的gif (或者你想要的任何东西)当状态是loading === true的时候，棘手的部分是你应该用[hidden]="true/false"隐藏img元素，而不是阻止它渲染，这样它就会实际加载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来了解原因，以及如何安全地应用它的解决方案。

Answer 2

这里不需要函数，只需添加到组件中即可：

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;" />

Answer 3

其思想是在默认情况下显示微调器，创建一个单独的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);