🔮 소마법 프로젝트 -10 (lazyloading)

April 07, 2020

페이지 로드 시, 이미지나 동영상 같은 용량이 큰 데이터를 한꺼번에 불러오는 게 아니라 사용자의 뷰 영역에 도달 했을 때, 해당 이미지를 로드하는 지연로딩 (lazy loading)을 이용해보았다.

#. Project Map
1. 레이아웃
- 1-1. 메인화면
- 1-2. 컴포넌트
2. 지연로딩
3. 개인적인 피드백
- - 3-1. Chrome Native lazy loading
4. 참고

#. Project Map

제작노트 한눈에보기[접기/펼치기]

1. 레이아웃

1-1. 메인화면

lazyloadingmain

우연히 원본 이미지와 blur된 이미지 모두 찍혔다…!

1-2. 컴포넌트

<Contents style={{ marginTop: '100px' }}>
  <p>1초의 지연로딩(lazy loading) 구현</p>
  <div>흐린 이미지로 지연</div>
  {obj.map(item => {
    return item
  })}
  <div>단색 이미지로 지연</div>
  {obj2.map(item => {
    return item
  })}
</Contents>

Contents 라는 styled-component를 사용해서, Container 뿐만 아니라 내부 p나 div의 스타일도 조정해주었다.

2. 지연로딩

2-1. ⭐ src, data-src

<img className="lazy" src="로딩전이미지URL" data-src="URL" alt="Some tacos." />

data-src 속성 값에는 원본 이미지 URL을 넣고, src 속성 값에는 비교적 용량이 낮은 대체 이미지 URL을 넣어준다.

2-2. ⭐ nodeList -> Array

let lazyImages = [].slice.call(document.querySelectorAll('img.lazy'))
// or
let lazyImages = Array.slice.call(document.querySelectorAll('img.lazy'))

querySelectorAll 메소드를 사용하면 DOM 엘리먼트들이 배열형태가 아니라 노드리스트 형태로 불러와진다.

그래서 배열의 형태로 변환해주어야함.

배열 메소드의 slice를 사용하고 call()을 통해 바인딩 해주면 됨.

2-3. scroll 이벤트

const lazyLoad = () => {
  if (active === false) {
    active = true

    setTimeout(() => {
      // image lazy loading 부분
      // ...

      active = false
    }, 1000)
  }
}

document.addEventListener('scroll', lazyLoad)

스크롤 이벤트 핸들러를 등록하고, 내부에 image lazy loading 코드를 넣어주었는데,

lazy loading이 직관적으로 보이지 않아서 setTimeout() 함수로 1초간 강제로 지연시켜주었다. 😂

2-4. ⭐ 지연로딩 : getBoundingClientRect()

lazyImages.map(lazyImage => {
  if (
    lazyImage.getBoundingClientRect().top <= window.innerHeight &&
    lazyImage.getBoundingClientRect().bottom >= 0 &&
    getComputedStyle(lazyImage).display !== 'none'
  ) {
    lazyImage.src = lazyImage.dataset.src
    lazyImage.classList.remove('lazy')

    lazyImages = lazyImages.filter(function(image) {
      return image !== lazyImage
    })

    if (lazyImages.length === 0) {
      document.removeEventListener('scroll', lazyLoad)
    }
  }
})