IntersectionObserver Entpreller

Question

Ich verwende die IntersectionObserver polyfill, um Bilder auf Kacheln zu laden. Das Problem ist, ich habe ein paar tausend Kacheln jede mit einem Bild darauf, die Lazyloaded sein muss.

Früher habe ich einen Scroll-Entpreller verwendet, um das Bild nur zu laden, wenn die Scroll stoppt, was zu einer enormen Verbesserung der Leistung führte.

Die Frage ist, wie man einen Scroll-Entpreller zusammen mit IntersectionObserver verwendet?

Eine Lösung, aber eine dumme ist eine vorläufige Anordnung der sichtbaren Elemente zu erstellen und fügen Sie ein Timeout

let timeoutLastEntities; 

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

Answer 1

Ok ich ein Rezept gefunden, aber es passt, noch nicht perfekt

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