[react] Img lazy loading 개념 및 정리

soob·2022년 7월 6일
0

react

목록 보기
1/2

Img lazyloading

적용하는 곳

  1. 페이지 스크롤 시 이미지를 Lazy loading할 때
  2. Infinite scrolling을 통해 스크롤을 하며 새로운 콘텐츠를 불러올 때
  3. 광고의 수익을 계산하기 위해 광고의 가시성을 참고할 때
  4. 사용자가 결과를 볼 것인지에 따라 애니메이션 동작 여부를 결정할 때

장점

성능향상

페이지 초기 로딩 시 필요한 이미지의 수를 줄여 디바이스가 다른 리소스들을 더 빠르게 처리해서 다운로드하도록 확보한다.

비용감소

페이지 내에서 전달한 총 바이트 용량을 줄일 수 있습니다.

구현 방법

Intersection Observer API 이용하기, image placeholder 사용하기, 이미지 요소의 loading 속성을 이용한 Native Lazy Loading 사용하기

Intersection observer API

Intersection observer : 기본적으로 브라우저 뷰포트(Viewport)와 설정한 요소(Element)의 교차점을 관찰하며, 요소가 화면(뷰포트)에 포함되는지 포함되지 않는지 구별하는 기능을 제공한다.

비동기적으로 실행되기 때문에, scroll 같은 이벤트 기반의 요소 관찰에서 발행하는 렌더링 성능이나 이벤트 연속 호출 같은 문제 없이 사용할 수 있다.

Intersection Observer API - Web APIs | MDN

new IntersectionObserver()를 통해 생성한 인스턴스(io)로 Observer를 초기화 하여 관찰할 대상을 지정합니다.

const io = new IntersectionObserver(callback, options) // 관찰자 초기화
io.observe(element) // 관찰할 대상(요소) 등록

Callback

관찰할 대상이 등록되거나 변화가 생기면 관찰자는 콜백을 실행합니다.

const io = new IntersectionObserver((entries, observer) => {}, options)
io.observe(element)

entries

entries는 IntersectionObserverEntry 인스턴스의 배열입니다.IntersectionObserverEntry는 읽기 전용(Read only)의 다음 속성들을 포함합니다.

  • boundingClientRect: 관찰 대상의 사각형 정보(DOMRectReadOnly)
  • intersectionRect: 관찰 대상의 교차한 영역 정보(DOMRectReadOnly)
  • intersectionRatio: 관찰 대상의 교차한 영역 백분율(intersectionRect 영역에서 boundingClientRect 영역까지 비율, Number)
  • isIntersecting: 관찰 대상의 교차 상태(Boolean)
  • rootBounds: 지정한 루트 요소의 사각형 정보(DOMRectReadOnly)
  • target: 관찰 대상 요소(Element)
  • time: 변경이 발생한 시간 정보(DOMHighResTimeStamp)
const io = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    console.log(entry) // entry is 'IntersectionObserverEntry'
  })
}, options)

io.observe(element)

options

root

타켓의 가시성을 검사하기 위해 뷰포트 대신 사용할 요소를 지정합니다. null일 경우 브라우저의 뷰포트가 기본 사용됩니다. 기본값 null

const io = new IntersectionObserver(callback, {
  root: document.getElementById('my-viewport')
})

rootMargin

여백을 이용하여 Root 범위를 확장하거나 축소할 수 있습니다.

px 또는 %

const io = new IntersectionObserver(callback, {
  rootMargin: '200px 0px'
})

Methods

observe()

대상 요소의 관찰을 시작합니다.

unobserve()

대상 요소의 관찰을 중지합니다.

관찰 중지할 대상 요소를 인수를 지정해야합니다.

const io1 = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    // 가시성의 변화가 있으면 관찰 대상 전체에 대한 콜백이 실행되므로,
    // 관찰 대상의 교차 상태가 false일(보이지 않는) 경우 실행하지 않음.
    if (!entry.isIntersecting) {
      return
    }
    // 관찰 대상의 교차 상태가 true일(보이는) 경우 실행.
    // ...

    // 위 실행을 처리하고(1회) 관찰 중지
    observer.unobserve(entry.target)
  })
}, options)

disconnect()

IntersectionObserver 인스턴스가 관찰하는 모든 요소의 관찰을 중지합니다.

0개의 댓글