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的（事件）{...}提供大小或者你希望你的操作。

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