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（の）それが次々..機能のすべての時間を呼び出すと、私は願っています1秒に10回だけ呼び出すよりも良い方法があります。 助けてくれてありがとう！

Answer 1

は、画像要素のエラーイベントを聴く：doSomethingの（イベント）{...}サイズまたは何をしたいとあなたの操作を提供

<img [src]="someUrl" (error)="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