IntersectionObservers will observe elements off the main thread. Versus Events that reacts synchronously to every occurance of the Event, Observers behave asynchronously.

Depends on intersection-observer-admin for reusing the same IntersectionObserver.

Polyfill

For IE and older versions of Safari, you can include this polyfill in your script tags.

Usage

1. Lazy loading lists of items
2. Lazy loading artwork. However, use laoding="lazy" for images when possible.
3. Metrics and observing DOM elements needed for background jobs

Lazy loading large lists

Often when loading large lists of items, we want to lazy load more items when we reach the bottom of the list.

<ul>
 ...
</ul>
<intersection-observer-sentinel id="load-more">
  <div>
    <h4>Loading</h4>
  </div>
</intersection-observer-sentinel>

<script>
  window.addEventListener('DOMContentLoaded', () => {
    let endSentinel = document.querySelector('intersection-observer-sentinel[id="load-more"]');
    endSentinel.addEventListener('enter', () => {
      loadMore();
    });
  });
</script>

Block form

Images are a common way to save Time to First Paint. When this web component comes into view, it will render the inner contents to the page.

<intersection-observer-sentinel block="true">
  <img src="https://url" />
</intersection-observer-sentinel>

This has one drawback - it loads the image, thus adding a new container with width/height to your page, potentially thrashing your layout.

Lazy Loading Images

• API -
  • configOptions: { scrollableArea?: string, threshold?: number, viewportTolerance?: object }
  • enterCallback: Function
  • exitCallback: Function

Unlike the last example, we render the <img> element to avoid layout thrashing.

<intersection-observer-sentinel class="artwork">
  <img data-src="https://url" style="background-color: gray;" height="200" width="200" />
</intersection-observer-sentinel>
<intersection-observer-sentinel class="artwork">
  <img data-src="https://url" style="background-color: gray;" height="200" width="200" />
</intersection-observer-sentinel>

<script>
  window.addEventListener('DOMContentLoaded', () => {
    let webComponents = Array.from(document.querySelectorAll('intersection-observer-sentinel'));
    webComponents.forEach((component) => {
      // attach enterCallback
      component.bottom = 100;
      artwork.addEventListener('enter', ({ detail: { target } }) => {
        target.src = target.getAttribute('data-src');
      });
      artwork.addEventListener('exit', ({ detail: { target } }) => {
        target.src = target.getAttribute('data-src');
      });
    })
  });
</script>

Getting Started

npm install
npm start

To build the component for production, run:

npm run build

To run the unit tests for the components, run:

npm test

Using this component

There are three strategies we recommend for using web components built with Stencil.

The first step for all three of these strategies is to publish to NPM.

Script tag

• Put a script tag similar to this <script src='https://unpkg.com/[email protected]/dist/intersection-observer-sentinel.js'></script> in the head of your index.html
• Then you can use the element anywhere in your template, JSX, html etc

Node Modules

• Run npm install intersection-observer-sentinel --save
• Put a script tag similar to this <script src='node_modules/intersection-observer-sentinel/dist/intersection-observer-sentinel.js'></script> in the head of your index.html
• Then you can use the element anywhere in your template, JSX, html etc

IntersectionObserver's Browser Support

Out of the box

• [1] Reportedly available, it didn't trigger the events on initial load and lacks isIntersecting until later versions.
• [2] This feature was implemented in Gecko 53.0 (Firefox 53.0 / Thunderbird 53.0 / SeaMonkey 2.50) behind the preference dom.IntersectionObserver.enabled.