Intersection Obserser membekukan IE11 dalam aplikasi sudut 7

Saya membuat aplikasi sudut 7 dan menggunakan Intersection Observer untuk memuat beberapa item dengan lambat. Ini bekerja sangat mudah di Chrome, Mozilla dan bahkan Edge. Namun di IE11, ketika pemuatan lambat dimulai dan pengamat persimpangan dimulai, aplikasi terhenti. Saya menambahkan import 'intersection-observer' di polyfills.ts untuk mendukung IE11. Saya bingung dengan perilaku ini.

  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 sumber

Jawaban (3)


arrow_upward
3
arrow_downward

sunting

Saya menemukan bahwa bahkan dengan menyetel properti yang disebutkan di bawah ke false IE sangat lambat saat menggulir dengan IO polyfill aktif. Solusi saya pada akhirnya adalah menggunakan acara gulir yang di-debounce dan menangani logika saya di sana. Saya membuat arahan gulir yang menangani ini sekarang.

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

Menggunakan @HostListener untuk ini juga memperlambat IE bagi saya.

Semua jawaban lain ini entah bagaimana tidak memahami bahwa dia menggunakan polyfill untuk IE karena tidak didukung di IE.

Tetapi jika Anda menggunakan polyfill pengamat persimpangan resmi dari W3C maka IE akan membeku jika Anda mencoba mengaktifkannya.

Saya mengalami kesalahan yang sama (dan pertama kali menemukan pertanyaan ini), tetapi kemudian saya menemukan satu detail kecil di dokumentasi:

Mengabaikan perubahan DOM
Anda juga dapat memilih untuk tidak memeriksa persimpangan ketika DOM berubah dengan menyetel properti USE_MUTATION_OBSERVER pengamat ke false

Hal ini tidak mungkin dilakukan dengan IO asli (karena menangani hal ini secara langsung) sehingga mudah untuk dilewatkan. Namun ternyata implementasi dari w3c juga memeriksa mutasi dom.

Angular (dan saya kira juga bereaksi dan kerangka kerja lainnya) yang sering mengubah dom kemudian dapat membekukan IE. Browser lain langsung mendukung IO, jadi polyfill tidak pernah digunakan di sana.

Singkat cerita, inilah yang berhasil bagi saya:

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

Dokumentasi juga menyebutkan Anda dapat menonaktifkan ini secara global tetapi ini tidak berhasil untuk saya.

IntersectionObserver.prototype.USE_MUTATION_OBSERVER = false; // Globally (didn't work for me)
person cloned    schedule 04.03.2020
comment
Saya menonaktifkan pengamat persimpangan hanya untuk ie11 dan menulis logika alternatif untuk itu. Akan menerapkan ini dan memeriksa. Terima kasih, sepertinya cara yang lebih baik. - person Ram; 05.03.2020
comment
Sekadar peringatan: Saat ini saya juga menonaktifkan IO untuk IE11 karena meskipun dengan tanda ini, IO masih berjalan sangat lambat di IE. Tidak dapat menjalankannya dengan baik, bahkan dengan menyesuaikan properti THROTTLE_TIMEOUT yang mereka sediakan untuk polyfill ini. Pemeriksaan untuk IO untuk IE perlu di-debounce dan tidak dibatasi (dalam kasus saya) - person cloned; 05.03.2020

arrow_upward
0
arrow_downward

Periksa file polyfill.ts batalkan komentar semua kode untuk IE.

Coba lakukan seperti ini

Anda dapat menginstalnya melalui npm npm install intersection-observer dan

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

Ini akan berhasil

person Adnan Aslam    schedule 24.09.2019
comment
Di pollyfills.ts, hanya ada 'classlist.js' yang diberi komentar dan zone.js, yang sudah tidak diberi komentar. - person Ram; 24.09.2019
comment
Coba solusi di atas - person Adnan Aslam; 24.09.2019
comment
Saya sudah melakukan itu, jadi ini akan berfungsi di IE, tetapi terhenti saat gulir saat itulah pengamat persimpangan mulai bekerja. - person Ram; 25.09.2019

arrow_upward
0
arrow_downward

Intersection Observer tidak mendukung browser IE, jika Anda ingin menggunakannya di browser IE, kita perlu menambahkan polyfill untuk itu.

Coba instal polyfill melalui npm:

npm install intersection-observer

Kemudian, tambahkan IntersectionObserver polyfill ke situs Anda menggunakan skrip berikut:

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

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

Tambahkan, Anda juga bisa menambahkan referensi berikut di halaman index.Html:

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

Informasi lebih detail, silakan periksa tautan ini.

Selain itu, Anda juga dapat membaca artikel ini untuk menginstal intersection-observer-polyfill

person Zhi Lv    schedule 25.09.2019
comment
Ketika saya menambahkan interseksi-pengamat-polyfill ke polyfill.ts, IE menimbulkan kesalahan sintaksis pada polyfills.js dan main.js, jika saya menghapusnya dan menambahkan interseksi-pengamat ke polyfill.ts, yaitu memuat, tetapi terhenti saat panggilan pengamat persimpangan yaitu saat menggulir saat itulah baris dimuat dengan lambat. - person Ram; 25.09.2019
comment
Saat macet, pernahkah Anda mencoba menggunakan alat Jaringan pengembang F12 untuk memeriksa permintaan, apakah berhasil? Apakah ada kesalahan saat Anda men-debugnya menggunakan alat pengembang F12? - person Zhi Lv; 25.09.2019
comment
Ya saya mencoba membuka Alat pengembang, tidak ada kesalahan, tetapi internet explorer kemudian macet dan menjadi TIDAK RESPONS. - person Ram; 25.09.2019