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相同，但它更具说明性，而且不那么繁琐的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);

Answer 4

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

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

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

4 个答案: