Angular 在窗口上优化Observable.fromEvent

在我的文件管理器UI中，每个文件项都在观察窗口

wheel

事件。每当文件项进入视口时，文件项组件就会开始加载其图像。当单个页面上有一大组文件时，这非常有用。但我遇到了一个问题，我的应用程序在页面上显示的文件数超过20个时会出现延迟

...
// observe to user scrolling through the page
// I store the subscription to unsubscribe when the image has loaded
// or when the file item component gets destroyed
this.sub = Observable.fromEvent(window, 'wheel').subscribe(() => {

    const container = this.elementRef.nativeElement

    if (container.getBoundingClientRect().top < window.innerHeight) {

        // Start loading the image when it enters the viewport
        this.startDownload$.next(true)
    }
})

。。。
//观察用户在页面中的滚动
//我存储订阅，以便在图像加载后取消订阅
//或者当文件项组件被销毁时
this.sub=Observable.fromEvent（窗口，'wheel'）。订阅（（）=>{
const container=this.elementRef.nativeElement
if（container.getBoundingClientRect（）.top

有没有办法优化此订阅

更新（2019年5月30日）：

---

这是一个非常低效的方法来实现我的意图。最好有一个监听滚动事件的“中心”服务，然后您的组件可以订阅/取消订阅该服务。不要在多个组件上设置相同的事件侦听器。

如果由于事件太多而需要限制请求数，请尝试使用debounceTime运算符

---

如果由于事件太多而需要限制请求数，请尝试使用debounceTime运算符

---

那么您为每个文件设置了事件侦听器？注意：“滚轮”事件是非标准的，请使用“滚动”而不是“滚动”，因此您为每个文件设置了事件侦听器？注意：“滚轮”事件是非标准的，请使用“滚动”

Observable.fromEvent(window, 'wheel')
    .debounceTime(300)
    .subscribe(() => {
        console.log(window)
    })