Question

我正在使用IntersectionObserver polyfill在磁贴上延迟加载图片。问题是我有几千个瓷砖，每个瓷砖上都有一个需要延迟加载的图像。

以前我只使用滚动去抖动器才能在滚动停止时加载图像，从而大大提高了性能。

问题是如何将卷轴去抖动与IntersectionObserver一起使用？

一个解决方案，但一个愚蠢的解决方案是创建一个可见项目的初步数组并添加超时

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

IntersectionObserver debouncer

1 个答案: