交差点オブザーバーdebouncer

Question

タイルにlazyload画像にIntersectionObserver polyfillを使用しています。 問題は、私はそれがlazyloadedする必要がある画像上にそれぞれ数千のタイルを持っているということです。

以前は、スクロール停止時にのみ画像を読み込むためにスクロールデバウンサーを使用していましたが、パフォーマンスが大幅に向上しました。

IntersectionObserverと一緒にスクロールデバウンサを使用する方法は？

一つの解決策が、愚かな1は[OK]を、私はレシピを見つけ

let timeoutLastEntities; 

new IntersectionObserver((entries) => { 
    setTimeout(function(){ 
     timeoutLastEntities.add(entities); 
     }, 3000); 
     // debouncer logic 
}, { threshold: 0.5 }).observe(imageTileElements); 

Answer 1

タイムアウトを目に見えるアイテムの予備的な配列を作成して追加することですが、それはまだ完全に

private initializeLazyLoader() { 
    this.observer = new IntersectionObserver(
     this.processLazyChanges, 
     { threshold: [0.5] } 
    ); 

    // When scroll is triggered 
    this.registerIntersectionObserverEvent(this.nativeElement, 'scroll', 300); 
} 

processLazyChanges(changes: any) { 
    changes.forEach((change: any) => { 
     var container = change.target; 
     $(container).css('border', '1px solid red'); 
     this.observer.unobserve(container); 
    }); 
} 

private registerIntersectionObserverEvent(element: any, event: any, debouncerTime: number) { 
    Observable.fromEvent(element, event) 
     .debounceTime(debouncerTime) 
     .subscribe((event) => this.initializeObservers(event)); 
} 

private initializeObservers(event: any) { 
    Array.from(document.querySelectorAll('app-tile')).forEach((tile: any) => { 
     this.observer.observe(tile); 
    }); 
} 

を当てはめるいません