Intersection Obser зависает в IE11 в приложении angular 7

Я создал приложение angular 7 и использовал Intersection Observer для ленивой загрузки некоторых элементов. Он работает как ветер в Chrome, Mozilla и даже Edge. Но в IE11, когда начинается отложенная загрузка и запускается наблюдатель пересечения, приложение зависает. Я добавил импорт «наблюдателя пересечения» в 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);
  }


typescript javascript angular intersection-observer internet-explorer-11
person Ram    schedule 24.09.2019    source источник

Ответы (3)


arrow_upward
3
arrow_downward

редактировать

Я обнаружил, что даже при установке нижеупомянутого свойства на false IE был ужасно медленным при прокрутке с активным полифилом ввода-вывода. В конце концов, я решил использовать отклоненное событие прокрутки и обработать там свою логику. Я создал директиву прокрутки, которая теперь этим занимается.

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, потому что он не поддерживается в IE.

Но если вы используете официальный полифилл наблюдателя пересечений от W3C, он заморозит IE, если вы попытаетесь его активировать.

У меня была такая же ошибка (и я сначала нашел этот вопрос), но потом я обнаружил одну маленькую деталь в документации:

Игнорирование изменений DOM
Вы также можете не проверять пересечения при изменении DOM, установив для свойства наблюдателя USE_MUTATION_OBSERVER значение false

Это невозможно с исходным вводом-выводом (потому что он обрабатывает это из коробки), поэтому его легко пропустить. Но, видимо, реализация от w3c также проверяет мутации dom.

Angular (и, я думаю, также реагирует и другие фреймворки), которые часто меняют dom, могут затем заморозить IE. Другие браузеры поддерживают ввод-вывод "из коробки", поэтому полифил там никогда не используется.

Короче говоря, у меня сработало следующее:

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

В документации также упоминается, что вы можете отключить это глобально, но это не сработало для меня.

IntersectionObserver.prototype.USE_MUTATION_OBSERVER = false; // Globally (didn't work for me)
person cloned    schedule 04.03.2020
comment
Я отключил наблюдатель пересечения только для ie11 и написал для этого альтернативную логику. Реализую это и проверю. Спасибо, похоже, способ получше. - person Ram; 05.03.2020
comment
Просто предупреждаю: в настоящее время я также отключаю ввод-вывод для IE11, потому что даже с этим флагом он все еще работает ужасно медленно в IE. Не удалось заставить его работать с производительностью, даже после настройки свойства THROTTLE_TIMEOUT, которое они предоставляют для этого полифила. Проверки ввода-вывода для IE должны быть отклонены, а не ограничены (в моем случае) - person cloned; 05.03.2020

arrow_upward
0
arrow_downward

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

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

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

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

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

person Adnan Aslam    schedule 24.09.2019
comment
В pollyfills.ts есть только "classlist.js" с комментариями и zone.js, который уже не прокомментирован. - person Ram; 24.09.2019
comment
Попробуйте вышеуказанное решение - person Adnan Aslam; 24.09.2019
comment
Я уже сделал это, поэтому он будет работать в IE, но зависает при прокрутке, когда начинает работать наблюдатель пересечения. - person Ram; 25.09.2019

arrow_upward
0
arrow_downward

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

Попробуйте установить полифилл через 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

person Zhi Lv    schedule 25.09.2019
comment
Когда я добавил полифилл-наблюдатель-пересечение в polyfill.ts, IE выдает синтаксическую ошибку в файлах polyfills.js и main.js, если я удалю это и добавлю наблюдателя-пересечения в polyfill.ts, т.е. загружается, но зависает при вызове наблюдателя пересечения т.е. при прокрутке, то есть когда строки загружаются лениво. - person Ram; 25.09.2019
comment
Когда зависает, вы когда-нибудь пытались использовать сетевые инструменты разработчика F12, чтобы проверить запрос, успешен ли он? Есть ли ошибка при отладке с помощью инструментов разработчика F12? - person Zhi Lv; 25.09.2019
comment
Да, я пытаюсь открыть Инструменты разработчика, он не показывает ошибок, но Internet Explorer затем зависает и НЕ РЕАГИРУЕТ. - person Ram; 25.09.2019