https://github.com/snewcomer/intersection-observer-sentinel
StencilJS IntersectionObserver sentinel component for fast and efficient rendering of HTML
https://github.com/snewcomer/intersection-observer-sentinel
Last synced: 21 days ago
JSON representation
StencilJS IntersectionObserver sentinel component for fast and efficient rendering of HTML
- Host: GitHub
- URL: https://github.com/snewcomer/intersection-observer-sentinel
- Owner: snewcomer
- License: mit
- Created: 2020-08-15T23:48:12.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2020-08-25T19:13:50.000Z (over 4 years ago)
- Last Synced: 2024-10-30T08:23:58.522Z (6 months ago)
- Language: TypeScript
- Size: 106 KB
- Stars: 3
- Watchers: 2
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: readme.md
- License: LICENSE
Awesome Lists containing this project
README
[IntersectionObservers](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) will observe elements off the main thread. Compared to Events that reacts synchronously to every occurance, Observers behave asynchronously.
Depends on [intersection-observer-admin](https://github.com/snewcomer/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"`](https://developer.mozilla.org/en-US/docs/Web/Performance/Lazy_loading) 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.
```html
...
Loading
window.addEventListener('DOMContentLoaded', () => {
let endSentinel = document.querySelector('intersection-observer-sentinel[id="load-more"]');
endSentinel.addEventListener('enter', () => {
loadMore();
});
});
```
### 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.
```html
```
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 `` element to avoid layout thrashing.
```html
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');
});
})
});
```
## Getting Started
```bash
npm install
npm start
```
To build the component for production, run:
```bash
npm run build
```
To run the unit tests for the components, run:
```bash
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](https://docs.npmjs.com/getting-started/publishing-npm-packages).
### Script tag
- Put a script tag similar to this `` 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 `` in the head of your index.html
- Then you can use the element anywhere in your template, JSX, html etc
## [**IntersectionObserver**'s Browser Support](https://platform-status.mozilla.org/)
### Out of the box
Chrome
51 [1]
Firefox (Gecko)
55 [2]
MS Edge
15
Internet Explorer
Not supported
Opera [1]
38
Safari
Safari Technology Preview
Chrome for Android
59
Android Browser
56
Opera Mobile
37
* [1] [Reportedly available](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`.