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

Angular2加载所有图像

1 个答案: