Пересечение Obserser замораживает IE11 в угловых 7 приложений - PullRequest
Новая
       18

Пересечение Obserser замораживает IE11 в угловых 7 приложений

0 голосов
/ 24 сентября 2019

Я создал приложение angular 7 и использовал Intersection Observer для отложенной загрузки некоторых элементов.Это работает как ветерок в Chrome, Mozilla и даже Edge.Но в IE11, когда начинается отложенная загрузка и запускается программа наблюдения за пересечениями, приложение зависает.Я добавил импорт 'intersection-наблюдатель' в polyfills.ts для поддержки IE11.Я запутался в этом поведении. 

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

Ответы [ 2 ]

0 голосов
/ 25 сентября 2019

Intersection Observer не поддерживает браузер IE , если вы хотите использовать его в браузере IE, нам нужно добавить для него polyfill.

Попробуйте установить polyfill черезnpm: 

npm install intersection-observer

Затем добавьте полифилл IntersectionObserver на свой сайт, используя следующий скрипт: 

<!-- 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>

Более подробная информация, пожалуйста, проверьте эту ссылку .

Кроме того, вы также можете обратиться к этой статье , чтобы установитьintersection-observer-polyfill

0 голосов
/ 24 сентября 2019

Проверьте файл polyfill.ts раскомментируйте весь код для IE.

Попробуйте сделать так

, вы можете установить его через npm npm install intersection-observer и 

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

будет работать

...