Intersection Observer API
addEventListener가 중복해서 쌓이고 복잡한 로직이 섞여 있으면 성능 이슈가 일어납니다.
Intersection Observer API는 타겟의 변화를 관찰하며 들어가거나 나갈 때 또는 두 요소의 교차 부분만큼 변경될 때 두 요소의 상태를 감지하여 콜백 함수를 실행합니다.
요소의 교차를 계속 지켜보기 위해 메인 스레드를 사용할 필요가 없어지고 교차 영역 관리를 최적화합니다.
이미지나 컨텐츠의 지연 로딩 (lazy loading), 무한 스크롤, 광고 수익 계산을 위한 광고의 가시성 보고, 사용자에게 결과가 표시되는 여부에 따라 작업이나 애니메이션을 수행할지 여부를 결정
// javascript
const listEnd = document.querySelector("#endList");
const option = {
root: null,
rootMargin: "0px 0px 0px 0px",
thredhold: 0,
}
const onIntersect = (entries, observer) => {
// entries는 IntersectionObserverEntry 객체의 리스트로 배열 형식을 반환합니다.
entries.forEach(entry => {
if(entry.isIntersecting){
const listWrap = document.querySelector("ul");
listWrap.insertAdjacentHTML("beforeend", `
<li></li>
<li></li>
<li></li>
<li></li>
`)
}
});
};
const observer = new IntersectionObserver(onIntersect, option);
observer.observe(listEnd);사용법
new IntersectionObserver()는 두 개의 인자를 받습니다.
callback
콜백 함수는 요소가 한 방향 혹은 다른 방향으로 교차할 때 실행됩니다.
option
- root
타겟과의 어떤 요소를 교차할지 정합니다.
기본값은 null이며 브라우저 뷰포트입니다. 엘리먼트로 설정하면 해당 엘리먼트와 타켓을 감시합니다.
- rootMargin
root의 범위를 정합니다.
css margin과 속성이 유사하며 "10px 20px 10px 30px"과 같이 정합니다.
기본값은 0입니다.
- thredhold
타겟이 얼마만큼 보였을 때 콜백 함수를 실행할지 정합니다.
0~1의 숫자로 정합니다. ex) 0.5 -> 50%, 0.25 -> 25%
25%마다 실행하고 싶으면 [0, 0.25, 0.5, 0.75, 1]과 같은 배열로 설정합니다.
endList를 타켓으로 설정한 후 화면에 들어오면 콜백 함수를 실행합니다.
entry.isIntersecting으로 교차가 되었는지를 판단하여 교차가 된 상태면 <li>들을 추가합니다.
entrie는 IntersectionObserverEntry객체를 배열로 반환합니다.
console.log(entries);
IntersectionObserver Method는 세 가지 메서드가 존재합니다.
1. IntersectionObserver.observe(target)
타겟을 관찰하기 시작할 때 사용합니다.
2. IntersectionObserver.unobserve(target)
관찰을 멈추고 싶을 때 사용합니다. 하나의 타겟만 관찰을 멈출 수 있습니다.
3. IntersectionObserver.disconnect(target)
관찰하고 있는 다수의 타겟을 모두 멈추고 싶을 때 사용합니다.
위 코드에서는 endList라는 div를 만들어 마지막 스크롤을 감지합니다.
리스트의 마지막 아이템을 감지할 수 있었지만, 그렇게 되면 unobserve와 observe 등 추가적인 작업이 필요합니다.