我的应用有很多带有描述的图片。当用户导航时，这些文本首先出现并且图像加载有一些延迟。我想在这里添加一个微调器。在加载图像时显示微调器并显示类似图像的指令
<myimgdir [src]='myimage.png'></myimgdir>
如何添加微调器并跟踪图像是否加载并显示？
【问题讨论】：
标签： angular angular2-directives
在您的控制器中，添加一个函数来处理“onLoad”事件，将状态设置为{loading: false}：
loading: boolean = true
onLoad() {
this.loading = false;
}
在你的模板中，当状态有loading === true时渲染一个加载的gif（或任何你想要的），棘手的部分是你应该用[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 以了解原因以及如何安全应用它的解决方案。
【讨论】：
img(...) 函数调用。
jade/pug 语法。您提到的那个块是标记，而不是 JavaScript，我将对其进行编辑以使用 HTML 语法
这里不需要函数，只需要添加到你的组件中：
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;" />
【讨论】：
想法是默认显示微调器，创建一个单独的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);
【讨论】：
我认为最简单的方法是在 img 元素上使用onError 事件。你可以像这样使用它：
<img [src]="image.src" onError="this.src='assets/my/fancy/loader.gif';">
【讨论】：