👀 IntersectionObserver API

DoonDoon·2019년 3월 26일

2019-03-26 16:03 작성됨
💅🏻 A banner created from here

🤔 IntersectionObserver API 란?
😇 브라우저 지원 현황
📃 용어 설명
🎈 사용 예시
👏 마치며

🤔 IntersectionObserver API 란?

MDN 문서에서는 이렇게 설명하고 있습니다

The Intersection Observer API provides a way to asynchronously observe changes in the intersection of a target element with an ancestor element or with a top-level document's viewport.

(의역)
관찰하고자 하는 엘리먼트와 조상 엘리먼트 또는 viewport 간의
교차(Intersection)의 변화를 비동기적으로 감지하는 방법입니다

음... 무슨 얘기인지 모르겠다구요? 저두요

교차의 변화를 감지한다는 것은 단편적으로 설명하자면
엘리먼트의 visibility (가시성) 에 관한 변화를 감지한다는 의미 입니다

Intersection Observer API는 엘리먼트가 viewport 에서
또는 다른 엘리먼트와의 관계에서 "보이는지 안보이는지"
를 쉽게 알 수 있도록 기능을 제공하는 역할을 합니다

API는 아래와 같은 보편적인 경우에 사용됩니다

이미지의 Lazy Loading
"Infinite Scrolling" 이라고 하는 비동기 무한 스크롤 UI
광고 매출 측정을 위해 배너 또는 광고가 노출 되었는지 확인
애니메이션을 작업을 수행할 지를 노출 여부를 사용하여 결정

이전에, .getBoundingClientRect() 와 window.innerHeight 를 사용해
어렵사리 가시성에 대한 정보를 얻었다면
Intersection Observer API 를 사용해 조금 더 편하게 작업할 수 있습니다

😇 브라우저 지원 현황

주요 브라우저의 지원 현황입니다
Google Chrome: 51^
Microsoft Edge: 15^
Firefox: 55^
IE: No Support ~~(뭘 기대하신거죠?)~~
Opera: No Support
Safari: No Support

Chrome 과 Safari 모두 Webkit 기반 브라우저인데 Chrome 만 지원하는게 좀 흥미로웠습니다
미 지원 브라우저를 위한 polyfill 이 있지만, 완벽하지는 않습니다
(w3c Github 에 폴리필이 있습니다. 링크)

그리고 당연하지만, IE 에서는 지원 되지 않고, 지원 계획도 없습니다
(죽이고 싶은 IE 유저와의 10선)

polyfill 을 사용하면 되는게 아니냐구요?
브라우저마다 동작이 다릅니다... (상상도 못한 동작 ㄴ(°0°)ㄱ)

이 페이지를 오페라나 사파리, 파폭으로
확인해보시면 폴리필을 적용 했음에도 불구하고 미묘하게 동작이 다릅니다
(이미지가 안 보이면 원래 사라져야 하는데 안 사라진다거나...)

IntersectionObserver API 의 개발 진행 상황은 이 곳 에서 확인할 수 있습니다
빨리 여러 브라우저에서 사용 가능했으면 좋겠네요 (IE 빼고 🤪)

📃 용어 설명

Intersection Observer API 를 이해하기 위해 몇 가지 관련 용어를 정리합니다

객체 생성과 callback, root, rootMargin, threshold

Observer 객체의 생성은 다음과 같이 합니다

const io = new IntersectionObserver(callback, {
  root: null, // 또는 scrollable 한 element
  rootMargin: '0px', // 지정하지 않으면 기본값은 0px 입니다,
  threshold: 0.5 // 0.0 부터 1.0 사이의 숫자를 지정할 수 있습니다. 배열 값도 가능합니다
})

1. root

root 의 값은 Element 또는 null 입니다
target (관측 대상) 을 감싸는 element 를 지정한다고 할 수 있습니다
만약 null 로 지정한다면 viewport 가 됩니다

문서 내의 scrollable 한 요소가 있고 <div class="scroll"></div>
관측 하고자 하는 element 가 그 안에 있다고 가정하면 <img class="lazy-loaded-image">
root 의 값은 document.querySelector('.scroll') 이 됩니다

2. rootMargin

root 요소를 감싸는 margin 값을 지정합니다
문자열로 작성해야 하며, css의 margin 처럼 px 또는 % 단위로 작성할 수 있습니다
threshold 나 교차 상태를 점검할 때 margin 값이 지정 되어 있다면, 이를 활용하여 계산합니다

3. threshold

target element 가 root 와 몇 % 교차했을 때, callback 을 실행할지 결정하는 값 입니다
값은 float 값으로 된 단일값 또는 배열값을 입력할 수 있고
0.0 부터 1.0 까지의 부동 소수점 값을 입력합니다

예를 들어, 스크롤 하는 중에 element 가 50% 보였을 때 실행할 callback 이 있다고 하면
threshold 값은 0.5 가 됩니다

또는, element 가 보이는 것을 여러 구간에서 callback 을 실행하고 싶다면
배열로 작성하면 됩니다

element 의 노출도 10% 당 무언가의 동작을 하고 싶다면, threshold 는
[0.0, 0.1, 0.2, 0.3, ..., 0.9, 1.0] 이 되겠죠!

4. callback

callback 은 target element 의 visibility 가 threshold 만큼 도달했을 때 호출될 함수 입니다
Element 배열인 entries와 자기 자신인 observer 가 매개 변수로 전달 됩니다

이를테면 이렇습니다

new IntersectionObserver((entries: Element[], observer: IntersectionObserver) => { /* ... */ }, {})

entries 는 target 으로 지정한 DOM element 객체입니다.
보통은 callback 함수는 실제 역치 (threshold) 에 도달 했을 때 실행할 동작을 작성합니다!

🎈 사용 예시

사용 예시는 위에 MDN 에서 제시한 것 처럼
Lazy loading, Infinite Scrolling 등에 사용할 수 있습니다

둘 다 할 수 있다고 하니까 둘 다 만들어 볼까요?

Lazy Loading

먼저 글과 이미지가 있고, 스크롤이 필요한 HTML 문서가 있다고 가정하겠습니다

<head>
<style>
  div.image-box {
    display: block;
    margin: 20px auto 0;
    width: 200px;
    height: 200px;
    background-color: #ACACAC;
    color: #FFFFFF;
    text-align: center;
    line-height: 200px;
    font-size: 24px;
  }
</style>
</head>
<body>
  <div class="image-box" data-src="https://source.unsplash.com/random/200x200">No Image</div>
</body>

위 이미지의 가시성 (Visibility) 가 80% 에 도달했을 때, 이미지를 실제로 불러와 보도록 하겠습니다
이미지가 로딩되지 않은 박스는, 회색 배경에 No Image 로 출력됩니다

아래와 같이 IntersectionObserver 를 만듭니다

const images = document.querySelectorAll('.image-box');
const threshold = 0.8;
const lazyLoadOption = { root: null, threshold };
const lazyLoadImage = (entries, observer) => {
  entries.forEach(entry => {
    const { target } = entry;
    if (entry.isIntersecting) {
      target.style.backgroundImage = `url("${target.dataset.src}")`;
      target.style.backgroundSize = `cover`;
      target.style.backgroundColor = `transparent`;
      target.textContent = '';
    }
  })
};
const lazyLoadingIO = new IntersectionObserver(lazyLoadImage, lazyLoadOption);
images.forEach(image => lazyLoadingIO.observe(image));

가시성 80% 일 때, 이미지를 불러와야 하므로 2번째 라인 처럼 threshold = 0.8 입니다

entry.isIntersecting 프로퍼티는 관찰하고자 하는 DOM 객체가
설정한 root 와 threshold 만큼 교차했는지에 대한 true/false 값 입니다
(관찰하려는 DOM 의 가시성이 threshold 를 초과하면 true, 아니면 false 입니다)

기존 div.box-image 엘리먼트의 배경과 글자를 지우고 background-image 를 추가하면
아래와 같이 잘 동작 합니다!

코드는 Gist 에서 확인할 수 있습니다!

ezgif.com-optimize.gif

Infinite Scrolling

(Native Infinite Scrolling with the IntersectionObserver API 를 일부 참고했습니다)

Infinite Scrolling 을 구현하려면 DOM 요소의 scrollTop, scrollHeight 등의 값과
'scroll' 이벤트도 등록하고, 스크롤이 끝까지 내려갔나 체크하고... 등 할 일이 많습니다 🙁

Intersection Observer 를 쓰면 간결하게...? 아무튼 큰 어려움 없이 구현할 수 있습니다
(물론 직접 바닐라 자바스크립트로 구현할일도 없으시겠죠 😅 여러 훌륭한 라이브러리들이 있어요)

그럼 간단하게 구현 해보겠습니다

아래와 같은 Layout 이 있습니다

<body>
	<h1 class="title">Obey the cats 🐈</h1>
    <ul class="infinite-container"></ul>
</body>

ul.infinite-container 에 li 를 계속해서 만들어 내는 형태를 구현합니다

const ioOptions = {
  root: null,
  threshold: 1,
};
const io = new IntersectionObserver(handleInfiniteScrolling, ioOptions);

먼저 IntersectionObserver 객체를 만들어 줍니다.

스크롤이 완전히 끝났을 때, 새로운 아이템을 로딩해야 하므로 threshold = 1 입니다.
root 는 우선은 viewport 기준이므로 null 값 입니다
(만약, 별도의 작은 스크롤 영역에 적용하신다면 root 를 지정해 주시면 됩니다!)

그럼 handleInfiniteScrolling 함수를 구현해 볼게요

const loadingNewCats = (newCats) => {
  const loadingTemplate = `<li><span>Loading New Cats...</span></li>`;
  return new Promise((resolve, reject) => {
    container.insertAdjacentHTML('beforeend', loadingTemplate);
    setTimeout(() => {
      resolve(newCats);
      container.removeChild(container.lastChild);
    }, 1000)
  })
};

const handleInfiniteScrolling = (entries, observer) => {
  const $last = [...entries].pop();
  if ($last.isIntersecting) {
    loadingNewCats(createNewCats()).then(newCats => {
      container.append(...newCats);
      currentLast = lastChild();
      observer.unobserve($last.target);
      observer.observe(currentLast);
    });
  }
};

(loadingNewCats 는 그냥 새로운 고양이 사진 10개를 불러오는 함수 입니다)

스크롤이 마지막에 도달 했을 때 호출될 함수인 handleInfiniteScrolling 는

ul 컨테이너의 마지막 li 의 visibility 가 1이 되었을 때 새 고양이 사진들을 로딩합니다
현재 observe li 엘리먼트는 unobserve 하고 새 li 엘리먼트를 observe 해주면 됩니다

코드는 Gist 또는 Codepen 에서 확인 가능합니다

ezgif.com-crop.gif

👏 마치며

JavaScript30 의 13일차 Slide in on Scroll 를 실습하던 중
이미지가 일정 스크롤에 도달했을 때, transition 애니메이션으로 slide-in 처리를 위해
어떤 방법이 있을까 하다가 과거에 레진 기술 블로그 에서 본 글을 기억해
실제로 적용해 보았습니다

이미지 lazy-loading 이나 무한 스크롤 등을 직접 구현할 수 있는 능력이 없다고 생각했는데
Intersection Observer API 를 이용하니 쉽게 구현 할 수 있었습니다

빠른 시일내에 여러 브라우저에서 사용할 수 있으면 좋겠네요!

잘못된 부분이나 지적은 언제나 환영합니다
긴 글 읽어주셔서 감사합니다