Day-1 Intersection , Resizer and Mutation Observer

[purushothaman-source]

Intersection Observer

Use cases : from lazy loading images, to scroll based animations

Blog

https://blog.webdevsimplified.com/2022-01/intersection-observer/

Videos

• Intersection Observer

Syntax

const observer = new IntersectionObserver(entries => {
  console.log(entries)
},{ threshold : 0 ,root:<container/> , rootMargin : "50px"})

Resizer Observer

Resizer Observer

const observer = new ResizeObserver(entries => {
  entries.forEach(entry => {
    const isSmall = entry.contentRect.width < 150
    entry.target.style.backgroundColor = isSmall ? "blue" : "orange"
  })
})

observer.observe(document.getElementById("test"))

Blog

https://blog.webdevsimplified.com/2022-01/resize-observer/

Mutation Observer

• Mutation Observer

[purushothaman-source]

Using Intersection Observer we can observer the changes to any html elements ..the callback function will get fired when the elements state changes whether it is moving out side the screen or into the screen this function will get trigger..

we will get these field when the callback triggers

• boundingClientRect is the actual size of the element
• intersectionReact is the visible size
• intersectionRatio is the actual percentage of how much the element is visible on the screen
• rootBound is the root element ..By default, the root element is the screen
• target is the actual element that we observing

[purushothaman-source]

Threshold

By default Threshold will be 0.. it means the callback function will get a trigger as soon as 1px get into the screen or move out of the screen..

Possible values : 0 to 1 ..

1 means function will trigger only when full element is visible or full element left the screen

You can also pass an array to threshold which means that the Intersection Observer will fire each time your element passes one of the thresholds passed to it.

const observer = new IntersectionObserver(entries => {
  entires.forEach(entry => {
    entry.target.innerText = `${Math.round(entry.intersectionRatio * 100)}%`
  })
}, { threshold: [0, .25, .5, .75, 1] })

[purushothaman-source]

Root Margin

It is used to shrink or enlarge the container size -ve value will shrin +ve value will enlarge ..this will be useful to fetch or animate the elements before its visble

const observer = new IntersectionObserver(
  changeColor,
  { rootMargin: "50px" }
)

[purushothaman-source]

Root

It is actually used to use the custom container instead of body

const observer = new IntersectionObserver(
  changeColor,
  { root: <container> }
)
``

[purushothaman-source]

Unobserve and Disconnect

It is important to stop observing elements when they no longer need to be observed, such as after they are removed from the page or after lazy loading an image in order to avoid memory leaks or performance issues. This can be done with the unobserve method or the disconnect method which are both methods on the Intersection Observer. The unobserve method takes a single element as its only parameter and it stops observing that single element. The disconnect method takes no parameters and will stop observing all elements.

new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      lazyLoadImage(entry)
      observer.unobserve(entry.target)
    }
  })
})