intersection-observer-sentinel v0.0.2
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
- Lazy loading lists of items
- Lazy loading artwork. However, use
laoding="lazy"
for images when possible. - 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/intersection-observer-sentinel@0.0.1/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(https://www.chromestatus.com/features/5695342691483648), 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
.