Intersection Observer 간단 정리하기

간단 예제

const options = { threshold: 1.0 };const callback = (entries, observer) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
observer.unobserve(entry.target);
console.log('화면에서 노출됨');
} else {
console.log('화면에서 제외됨');
}
});
}
const observer = new IntersectionObserver(callback, options);observer.observe(
document.getElementById('id')
);
  1. Intersection Observer 객체를 생성하면서, Callback Functionoption 을 전달한다.
  2. Intersection Observer 에서 observe 로 구독할 Target Element 를 추가한다.
  3. Target Element 가 options.threshold 로 정의한 Percent(%) 만큼 화면에 노출 혹은 제외 되면, entries 배열 에 추가하고, Callback Function 을 호출한다.
  4. Callback Function 에서 전달 받은 entries 배열을 확인하면서, isIntersecting 으로 노출 여부를 확인한다.
  5. 만약 더이상 Target Element 를 구독할 필요가 없다면, IntersectionObserver 에서 unobserve 로 제거 할 수 있다.

Intersection Observer

Intersection Observer 를 생성할 때는 옵션을 설정할 수 있다.

1. root

root 로 정의된 Element 기준으로 Target Element 의 노출, 비노출 여부를 결정한다.

2. rootMargin

rootMargin 은 ‘0px 0px 0px 0px’ 형태로 정의할 수 있다.

3. threshold

threshold 를 numberArray<number> 로 정의할 수 있다. 정의하지 않는다면 기본값은 0 이다.

const optionOne = { threshold: 1.0 };
const observer = new IntersectionObserver(callBack, optionOne);
// isIntersecting: false, intersectionRatio: 0
// isIntersecting: true, intersectionRatio: 1
// isIntersecting: false, intersectionRatio: 0
const optionArray = { threshold: [0, 0.25, 0.5, 0.75, 1] };
const observer = new IntersectionObserver(callBack, options);
// isIntersecting: false, intersectionRatio: 0
// isIntersecting: true, intersectionRatio: 0.0216450225561857
// isIntersecting: true, intersectionRatio: 0.2532467544078827
// isIntersecting: true, intersectionRatio: 0.5043290257453918
// isIntersecting: true, intersectionRatio: 0.7510822415351868
// isIntersecting: true, intersectionRatio: 1
// isIntersecting: true, intersectionRatio: 0.7467532753944397
// isIntersecting: true, intersectionRatio: 0.49567100405693054
// isIntersecting: true, intersectionRatio: 0.24891774356365204
// isIntersecting: false, intersectionRatio: 0

Intersection Observer Entry

Target Element 의 노출 혹은 비노출 따라 Intersection Observer Entry 배열을 만들고, Callback Function 을 호출한다

  • target : Target Element
  • time : 노출되거나 비노출된 시간
  • isIntersecting : 노출 여부
  • intersectionRatio : 노출된 비율
  • intersectionRect : 노출된 영역
  • boundingClientRect : TargetElement.getBoundingClientRect() 값
  • rootBounds : RootElement의 bound 값 만약 옵션에서 지정하지 않았다면, 화면 크기 이다.

Image Lazy Load 구현해 보기

Intersection Observer 를 이용하면 쉽게 Image Lazy Load 를 구현할 수 있다.

// html
<img class=’lazy’ src=’empty.png’ data-src=’image1.png’ />
<img class=’lazy’ src=’empty.png’ data-src=’image2.png’ />
const options = { threshold: 0 };
const observer = new IntersectionObserver(
(entries, observer) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
observer.unobserve(entry.target);
entry.target.src = entry.target.dataset.src;
}
});
}
, options);
observer.observe(
Array.from(
document.getElementsByClassName('lazy')
)
);

Internet Explorer Polyfill 적용하기

Intersection Observer 는 IE 에서는 지원하지 않는다.

--

--

Javascript is great We may not be great

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store