## What is Intersection Observer API
Intersection Observer is a JavaScript API for the Web that allows to observe the appearance of a target element in the browser document's viewpoint or in relation to one of its ancestors (one of elements that nests the target element).

## Some use cases of Intersection Observer
The good thing about Intersection Observer is that it does what you could only do by using several libraries before. You can use it for example for:
- Lazy-loading of images or other content as a page is scrolled.
- Implementing "infinite scrolling" web sites, where more and more content is loaded and rendered as you scroll, so that the user doesn't have to flip through pages.
- Reporting of visibility of advertisements in order to calculate ad revenues.
- Deciding whether or not to perform tasks or animation processes based on whether or not the user will see the result.

## Intersection observer concepts and usage
The Intersection Observer Interface provides a callback function that is called regarding to the following cases:
- The first time you tell the Observer to observe the target element
- When the target element crosses the document's viewpoint or a specific element. This specific element is called **root element** or **root**

In general, we look at the change in the intersection of the target element and the scrollable parent (ancestor) element closest to the target element. And if the target element has no scrollable parent, by default the document's viewpoint will be the reference.

> The degree of intersection between the target element and its root is the intersection ratio. This is a representation of the percentage of the target element which is visible as a value between 0.0 and 1.0.
>
> -- <cite>[MDN](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#a_simple_example)</cite>

## Creating an intersection observer
```javascript
const options = {
	root: root_element,
	rootMargin: "",
	threshold: 1.0
}

let observer = new IntersectionObserver(callback, options)
```
The Intersection Observer takes two parameters:
- **Options**: The options allows the observer to control the execution of the callback function. It is an object with the following properties:

    - ***root***: The element (must be ancestor of the target element) used as viewpoint to check the visibility of the target element. If it is not specified or its value is ***null*** then the default viewpoint of the browser will be the reference.

    - ***rootMargin***: It is used the same way as the CSS margin property to define offsets added to each side of the intersection root's bounding box to create the final intersection root bounds.

    - **threshold**: It takes either a number or an array of numbers that indicates what percentage of the target element must be visible to execute the callback function. If we want to execute the callback function:
        - When 50% of the element is visible → threshold: 0.5
        - When each 25% of the element is visible → threshold: [0, 0.25, 0.5, 0.75, 1.0]

- **Callback function**: A function that will be run whenever a ***threshold*** is crossed. The function is called with two parameters:
    - An array of [IntersectionObserverEntry](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserverEntry) objects. Each entry describes an intersection change for one observed element
    - The observer

## How to observe an element
Let's suppose we have a scrollable html element with ***id*** attribute equals to ***root*** and a nested element of that element with the ***id*** attribute equals to ****target****

Now let's see how to track the *target* element:

```javascript
const rootElem = document.querySelect("#root");
const targetElem = document.querySelect("#target");

const options = {
    root: rootElem,
    rootMargin: "0px",
    threshold: 0.5
}

const callback = (entries, observer) => {
  entries.forEach((entry) => {
    // target element:
    //   entry.boundingClientRect
    //   entry.intersectionRatio
    //   entry.intersectionRect
    //   entry.isIntersecting
    //   entry.rootBounds
    //   entry.target
    //   entry.time
  });
};

const observer = new IntersectionObserver(callback, options)

observer.observe(targetElem)
```
What we do here is simple:
1. Select html elements
2. Define the root element
3. Define the visibility **threshold** of the target element from which to execute the callback function
4. Tell the observer to observe the target element visibility change

With the **threshold** value to **0.5** the *callback function*  is only called when 50% of the target element is visible in the root element.

If the **threshold** value was an array like **[0, 0.25, 0.5, 0.75, 1]**, the *callback function* would be called when at least one pixel or 25% or 50% or 75% or 100% of the target element is visible in the root element.

And to check whether the target element is visible, we use the ***isIntersecting*** property of the entry object. It is a boolean that's **true** or **false** either the  target element is intersecting with the root element or not.

## Let's practice

### Observe multiple target elements throught images lazy loading
The example here allows to load a random image from [picsum.photos](https://picsum.photos) and set it as the background image of the current list item in viewpoint. A loading text is diplayed during the loading time of the image. In this example, you will learn two (2) things:
- You will learn how to observe multiple target elements
- You will learn how to lazily load images

<iframe width="100%" height="700" src="//jsfiddle.net/ouwa_nkt/2m6z0nwp/80/embedded/js,html,css,result/dark/" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe>

As said previously, to tell the Intersection Observer to observe the target element intersection change with the browser document's viewpoint, you simply have to set the callback function option's **root** property to ***null*** or not to provide it at all.

### Create Infinite scroll
ou can watch the tutorial directly on youtube if you prefer visual content than reading.
<iframe width="100%" height="600" src="https://www.youtube.com/embed/wNMgrl4Budk" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

We have here a scrollable <span style="color:red">div</span> element which **id** attribute value is ***scroller***. It is our **root** element. We also have a function called **loadCard** that creates **n** html elements and insert them into the scrollable <span style="color:red">div</span>. Then we have our target element which **id** attribute value is ***target***.

Here to create the infinite scroll, i used a simple trick: The first time we observe the target element, the callback function is executed and as the page is blank, the target element will be forcely in the viewpoint and ***isIntersecting*** will be true. Next we add **10** elements to the scrollable <span style="color:red">div</span> then we add the **target element** also to it. After that, each time we scroll to the target element, the previous steps will repeat and that creates an infinite scroll

<iframe width="100%" height="600" src="//jsfiddle.net/ouwa_nkt/es6qdnaz/11/embedded/js,html,css,result/dark/" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe>

Her you can notice that we didn't precise a value for **threshold**. It is because by default it's value is **0**. That means as soons as a single pixel of the target element is visible, the *callback function* will be executed

### Next Step
I hope you enjoyed reading this post and learned something from it. If yes, let's connect on [linkedin](https://www.linkedin.com/in/mamadou-niakate/). You can also follow me on [Twitter](itter.com/mr_nkt223) and [Github](https://github.com/mamadou-niakate) for more content. I publish also on [dev.to](https://dev.to/mamadouniakate) and [medium.com](https://medium.com/).

Thank you for your reading :)

How to use Intersection Observer API to create Infinite Scroll and Lazy-loading of images

Mamadou Niakaté

Categories

Social