CODEWITHSUNDEEP
javascriptangulartypescriptinternet-explorer-11intersection-observer
Ram
Ram

Reputation: 611

Intersection Obserser freezes IE11 in angular 7 application

I created an angular 7 application and used Intersection Observer to lazy load some items. It working like a breeze in Chrome, Mozilla and even Edge. But in IE11, when the lazy loading starts and intersection observer starts , the application freezes. I added import 'intersection-observer' in polyfills.ts to support IE11. I am confused with this behaviour.

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

Upvotes: 0

Views: 1345

Answers (3)

cloned
cloned

Reputation: 6742

edit

I found out that even with setting the down below mentioned property to false IE was horribly slow while scrolling with IO polyfill active. My solution in the end was to use a debounced scroll event and handle my logic in there. I created a scroll directive that handles this now.

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

Using @HostListener for this also slowed down IE for me.

All these other answers somehow missed the point that he used the polyfill for IE because it's not supported in IE.

But if you use the official intersection observer polyfill from W3C it will freeze IE if you try to activate it.

I had the same error (and first found this question), but then I found out one little detail in the documentation:

Ignoring DOM changes
You can also choose to not check for intersections when the DOM changes by setting an observer's USE_MUTATION_OBSERVER property to false

This is not possible with the original IO (because it handles this out of the box) so it's easy to miss. But apparently the implementation from w3c also checks dom mutations.

Angular (and I guess also react and other frameworks) who change the dom frequently can then freeze IE. Other browser support IO out of the box, so the polyfill is never used there.

Long story short, this is what worked for me:

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

Documentation also mentions you can disable this globally but this didn't really work for me.

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

Upvotes: 4

Zhi Lv
Zhi Lv

Reputation: 21383

The Intersection Observer is not supporting the IE browser, if you want to use it in IE browser, we need to add polyfill for it.

Try to install the the polyfill via npm:

npm install intersection-observer

Then, add the IntersectionObserver polyfill to your site using the following script:

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

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

Add, you could also add the following reference in the index.Html page:

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

More detail information, please check this link.

Besides, you could also refer to this article to install the intersection-observer-polyfill

Upvotes: 0

Adnan Aslam
Adnan Aslam

Reputation: 94

Check the file polyfill.ts uncomment all the code for IE.

Try to do like this

you can install this via npm npm install intersection-observer and 

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

It will work

Upvotes: 0

Related Questions