相交观察者在angular 7应用程序中冻结IE11

Question

我创建了一个angular 7应用程序，并使用交叉点观察者来延迟加载一些项目。它在Chrome，Mozilla，甚至Edge中都能轻而易举地工作。但在IE11中，当延迟加载和交叉点观察器启动时，应用程序就会冻结。为了支持IE11，我在polyfills.ts中添加了导入“intersection-observer”。我对这种行为感到困惑。

​

  intersectionObserverForTableRow() {
    const selectedNodeLists = document.getElementsByClassName('tableDataRow');

    const tableIntersectionObserver = new IntersectionObserver((entries, tableIntersectionObserver) => {
      entries.forEach((entry) => {
        if (!this.hasNextPage) {
          this.showShimmerRows = false;
          tableIntersectionObserver.disconnect();
        }
        if (entry.isIntersecting) {
          const el = entry.target;
          // console.log(el.id, ('lazyLoadedObserver' + (this.currentTableContent.length - 1)))
          if (el.id === ('lazyLoadedObserver' + (this.currentTableContent.length - 1))) {
            // console.log('inside');
            // this.currentTableContent = this.currentTableContent.concat(this.setDummyDataForTableRowShimmer());
            this.setDummyDataForTableRowShimmer();
            this.pageNumber++;
            this.loadNextSetOfData.emit(this.pageNumber);
            // console.log(this.currentTableContent)
            // setTimeout(() => {
            //   this.triggerObserver(selectedNodeLists, tableIntersectionObserver)
            // }, 10);
            tableIntersectionObserver.unobserve(entry.target);
          }
        }
      });
    });

    this.triggerObserver(selectedNodeLists, tableIntersectionObserver);
  }

​

Answer 1

编辑

我发现，即使将下面提到的属性设置为false，IE在IO polyfill处于活动状态时的滚动速度仍然非常慢。最后，我的解决方案是使用一个去抖动的scroll事件，并在其中处理我的逻辑。我现在创建了一个scroll指令来处理这个问题。

private setScroller(scroller: CdkScrollable) {
  this.scroller = scroller;
  this.scroller.elementScrolled().subscribe(() => {
    this.scrolled();
  });
}

@debounce() // this is a debounce decorater that only triggers if there are no events for over 300ms
private scrolled() {
  // dispatch an event to the SETTER to get the componentId
  if (this.isIE11) {
    this.callIEFunction();
  }
}

对我来说，使用@HostListener也会降低IE的速度。

所有这些其他答案不知何故忽略了他在IE中使用polyfill的要点，因为IE不支持polyfill。

但是如果你使用来自W3C的官方交叉点观察者polyfill，如果你试图激活它，它将冻结IE。

我也遇到了同样的错误(首先发现了这个问题)，但随后我在文档中发现了一个小细节：

忽略DOM更改

还可以通过将观察者的USE_MUTATION_OBSERVER属性设置为false来选择在DOM更改时不检查交叉点

对于原始IO，这是不可能的(因为它开箱即可处理)，因此很容易遗漏。但显然，w3c的实现也检查了dom的突变。

经常更改dom的Angular (我猜还有react和其他框架)可以冻结IE。其他浏览器支持开箱即用的IO，因此永远不会在那里使用polyfill。

长话短说，以下是对我有效的方法：

var io = new IntersectionObserver(callback);
io.USE_MUTATION_OBSERVER = false;

文档还提到你可以全局禁用它，但这对我来说并不是真的有效。

IntersectionObserver.prototype.USE_MUTATION_OBSERVER = false; // Globally (didn't work for me) 

Answer 2

检查文件polyfill.ts，取消注释IE的所有代码。

试着这样做

您可以通过npm npm install intersection-observer和

import into polyfills.ts as import 'intersection-observer'; 

看起来不错

Answer 3

Intersection Observer is not supporting the IE browser，如果你想在IE浏览器中使用它，我们需要为它添加polyfill。

尝试通过npm安装polyfill：

npm install intersection-observer

然后，使用以下脚本将IntersectionObserver polyfill添加到站点：

<!-- Load the polyfill first. -->
<script src="path/to/intersection-observer.js"></script>

<!-- Load all other JavaScript. -->
<script src="app.js"></script>

添加，您还可以在index.Html页面中添加以下引用：

<script src="https://polyfill.io/v3/polyfill.min.js?features=IntersectionObserver"></script>

更多详情，请查看this link。

此外，您还可以参考this article来安装intersection-observer-polyfill