Intersection Obserser ค้าง IE11 ในแอปพลิเคชันเชิงมุม 7

ฉันสร้างแอปพลิเคชัน เชิงมุม 7 และใช้ Intersection Observer เพื่อโหลดบางรายการแบบขี้เกียจ มันทำงานได้รวดเร็วใน Chrome, Mozilla และแม้แต่ Edge แต่ใน IE11 เมื่อการโหลดแบบ Lazy Loading เริ่มต้นและผู้สังเกตการณ์ทางแยกเริ่มทำงาน แอปพลิเคชันจะหยุดทำงาน ฉันเพิ่มการนำเข้า 'intersection-observer' ใน 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

แก้ไข

ฉันพบว่าแม้การตั้งค่าคุณสมบัติที่กล่าวถึงด้านล่างนี้เป็น IE ที่เป็นเท็จก็ยังช้ามากในขณะที่เลื่อนโดยที่ IO polyfill ทำงานอยู่ วิธีแก้ปัญหาของฉันในท้ายที่สุดคือใช้เหตุการณ์การเลื่อนแบบ debounced และจัดการตรรกะของฉันในนั้น ฉันสร้างคำสั่งการเลื่อนที่จัดการสิ่งนี้ทันที

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 ช้าลงสำหรับฉันด้วย

คำตอบอื่น ๆ ทั้งหมดนี้พลาดจุดที่เขาใช้ polyfill สำหรับ IE เพราะไม่รองรับใน IE

แต่ถ้าคุณใช้ polyfill ผู้สังเกตการณ์สี่แยกอย่างเป็นทางการจาก W3C IE จะหยุดทำงานหากคุณพยายามเปิดใช้งาน

ฉันมีข้อผิดพลาดเดียวกัน (และพบคำถามนี้เป็นครั้งแรก) แต่จากนั้นฉันก็พบรายละเอียดเล็กน้อยในเอกสารประกอบ:

การเพิกเฉยต่อการเปลี่ยนแปลง DOM
คุณยังสามารถเลือกที่จะไม่ตรวจสอบจุดตัดเมื่อ DOM เปลี่ยนแปลงได้ด้วยการตั้งค่าคุณสมบัติ USE_MUTATION_OBSERVER ของผู้สังเกตเป็น false

สิ่งนี้เป็นไปไม่ได้กับ IO ดั้งเดิม (เพราะมันจัดการสิ่งนี้ได้ทันที) ดังนั้นจึงพลาดได้ง่าย แต่เห็นได้ชัดว่าการใช้งานจาก w3c ยังตรวจสอบการกลายพันธุ์ของ dom ด้วย

เชิงมุม (และฉันคิดว่ายังตอบสนองและเฟรมเวิร์กอื่น ๆ ) ที่เปลี่ยน dom บ่อยครั้งก็สามารถหยุด 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)
person cloned    schedule 04.03.2020
comment
ฉันปิดการใช้งานผู้สังเกตการณ์ทางแยกสำหรับ ie11 เท่านั้น และเขียนตรรกะทางเลือกสำหรับสิ่งนั้น จะดำเนินการนี้และตรวจสอบ ขอบคุณครับ ดูเหมือนจะเป็นวิธีที่ดีกว่า - person Ram; 05.03.2020
comment
โปรดทราบ: ขณะนี้ฉันกำลังปิดการใช้งาน IO สำหรับ IE11 ด้วย เพราะถึงแม้จะมีการตั้งค่าสถานะนี้ แต่ก็ยังคงทำงานช้ามากใน IE ไม่สามารถเรียกใช้ประสิทธิภาพได้ แม้ว่าจะปรับคุณสมบัติ THROTTLE_TIMEOUT ที่พวกเขาจัดเตรียมไว้สำหรับโพลีฟิลนี้แล้วก็ตาม การตรวจสอบ IO สำหรับ IE จะต้องถูก debounced และไม่ควบคุมปริมาณ (ในกรณีของฉัน) - 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 เราต้องเพิ่ม polyfill ลงไป

ลองติดตั้ง polyfill ผ่าน npm:

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>

ข้อมูลรายละเอียดเพิ่มเติม โปรดตรวจสอบลิงก์นี้

นอกจากนี้ คุณยังสามารถอ้างถึงบทความนี้ เพื่อติดตั้ง intersection-observer-polyfill

person Zhi Lv    schedule 25.09.2019
comment
เมื่อฉันเพิ่ม intersection-observer-polyfill ให้กับ polyfill.ts IE จะแสดงข้อผิดพลาดทางไวยากรณ์บน polyfills.js และ main.js ถ้าฉันลบสิ่งนั้นออกและเพิ่ม intersection-observer ลงใน polyfill.ts เช่นโหลด แต่ค้างเมื่อมีการเรียกของผู้สังเกตการณ์ทางแยก นั่นคือในขณะที่เลื่อนนั่นคือตอนที่โหลดแถวแบบขี้เกียจ - person Ram; 25.09.2019
comment
เมื่อค้าง คุณเคยลองใช้เครื่องมือเครือข่ายนักพัฒนา F12 เพื่อตรวจสอบคำขอว่าสำเร็จหรือไม่? มีข้อผิดพลาดใด ๆ เมื่อคุณทำการดีบักโดยใช้เครื่องมือสำหรับนักพัฒนา F12 หรือไม่? - person Zhi Lv; 25.09.2019
comment
ใช่ ฉันพยายามเปิดเครื่องมือสำหรับนักพัฒนา มันไม่แสดงข้อผิดพลาด แต่ Internet Explorer ก็ค้างและไม่ตอบสนอง - person Ram; 25.09.2019