Understanding the Intersection Observer API
Content
- What is Intersection Observer
- Use cases
- Why Intersection Observer?
- How to create Intersection Observe
- How our project use it
What is Intersection Observer
It enables you to detect the visibility of an element asynchronously.
And also detect the relative visibility of two elements in relationship to each other.
Title Text
Use cases
- Lazy loading of images
- Infinite scrolls
- Reporting of visibility of advertisements in order to calculate ad revenues
- To run costly renderings and animations only when they are visible on the screen
Why Intersection Observer
Intersection Observer
Event handlers
- Runs in main thread
- Site become sluggish
- Cause performance problems
- Runs asynchronously
- Better performance
- Better user experience
How to use
const options = {
root: null,
rootMargin: '10px',
threshold: 1.0
}
const onIntersection = (entries) => {
...
};
const observer = new IntersectionObserver(onIntersection, options);
observer.observe(document.querySelector('#some-target'));
Terminologies
- Intersection
- root
-
rootMargin
-
threshold
Intersection
Root
Root Margin
Thresholds
