Angular2所有图像加载

Question

我试图弄清楚我应该如何检测是否所有图像都已加载到我的元素中。 我的元素现在是这样的：

<div class="flexbox" appMyMasonry>
    <div *ngFor="let new of specificNews | async}" class="box">

               <md-card class="example-card">
                   <img md-card-image src="{{new.coverImageUrl}}">
                   ....

appMyMasonry 是我的指令：它根据元素应如何填充可用空间来进行排序/定位...这里重要的是，现在它只有在我调用目录的方法时才有效，例如这个：

@ViewChild(MyMasonryDirective) directive = null

ngAfterViewChecked(): void {
    this.directive.sortElements();
  }

基本上它可以工作...但是由于 ngAfterViewChecked() 它一直调用该函数..一个接一个，我希望有比每秒调用 10 次更好的方法.. 感谢您的帮助！

Answer 1

监听图片元素的错误事件：

<img [src]="someUrl" (error)="doSomething($event)">

doSomething(event) { ... } 为您提供大小或您想要的操作。

Plunker example

如果您只想签入代码，可以使用Checking if image does exist using javascript中解释的方法

@Directive({
  selector: 'img[default]',
  host: {
    '(error)':'updateUrl()',
    '[src]':'src'
   }
})
class DefaultImage {
  @Input() src:string;
  @Input() default:string;

  updateUrl() {
    this.src = this.default;
  }
}

Directive Plunker example