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

Question

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

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

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

Answer 1

在控制器中，添加一个函数来处理“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 的相同，但在我看来它更具声明性并且稍微不那么麻烦。

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

我认为最简单的方法是在 img 元素上使用

onError

事件。你可以像这样使用它：

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

Answer 4

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