교차점 관찰자 debouncer

Question

타일에 lazyload 이미지에 IntersectionObserver polyfill을 사용하고 있습니다. 문제는 각 이미지에 lazyloaded해야하는 이미지가있는 수천 개의 타일이 있다는 것입니다.

이전에는 스크롤이 멈추었을 때만 이미지를로드하기 위해 스크롤 debouncer를 사용하여 성능이 크게 향상되었습니다.

질문은 IntersectionObserver와 함께 스크롤 debouncer를 사용하는 방법입니까?

하나 개의 솔루션하지만 바보 같은 사람은 좋아 내가 조리법을 발견

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); 
    }); 
} 

피팅 아니에요