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

Question

我的应用有很多带描述的图片。当用户导航时，这些文本首先出现，图像加载有一些延迟。我想在这里添加一个微调器。加载图像时显示微调器并显示图像的指令

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

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

Answer 1

想法是默认显示微调器，创建一个单独的 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);

Answer 2

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

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

在您的模板中，在状态为 loading === true 时呈现加载 gif（或任何您想要的），棘手的部分是您应该只隐藏 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 以了解原因和解决方法安全地应用它。

Answer 3

我认为最简单的方法是在 img 元素上使用 onError 事件。你可以像这样使用它：

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

Answer 4

你不需要这里的功能，只需添加到你的组件：

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

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

How to load image with spinner in angular2

angular2-directives

angular