Infinity Scrolling과 이미지 Lazy Loading

boh001·2020년 6월 30일
0

Javascript

목록 보기
1/3

사용자가 보고 있는 브라우저 화면의 크기는 제한되어있다. 그러므로 보이지도 않는 콘텐츠를 미리 렌더링할 필요가 없다.

Infinity Scrolling

  • 이를 위해 콘텐츠의 일부분을 로딩하고 나머지는 스크롤이 끝까지 내려왔을 때 로딩한다. 이것을 Inifnity Scrolling이라고 한다.

  • 스크롤이 끝까지 내려왔는지 확인하기 위해서는 세가지 요소가 필요하다.

const innerHeight = window.innerHeight;
// 사용자에게 보여지고 있는 브라우저의 높이

const scrollHeight = window.scrollY;
// 현재 스크롤 위치

const bodyHeight = document.body.offsetHeight;
//전체 브라우저의 실질적인 높이

  • 스크롤이 끝까지 내려갈때 마다 데이터를 fetch한다.
// index.js
var count = 0;
const scrolling = async (e) => {
  if (window.innerHeight + window.scrollY >= document.body.offsetHeight) {
    count++;
    const content = document.createElement("div");
    const data = await fetch(
      `https://api.themoviedb.org/3/movie/now_playing?api_key=api_key&language=ko-KR&page=${count}`
    )
      .then((res) => res.json())
      .then((Json) => Json.results);
    const addContent = '<div class="block"><p>' + data[0].title + "</p></div>";

    content.innerHTML = addContent;
    const article = document.getElementById("article");
    article.appendChild(content);
  }
};
window.onscroll = scrolling;
// onscroll와 콜백함수를 등록한다.

이미지 Lazy Loading

  • 페이지를 읽어들이는 시점에서 일부 이미지만을 로딩하고 사용자의 시야에 이미지가 들어오는 시점에 나머지를 로딩함으로써 메모리 낭비를 방지한다.
  • 브라우저에서 이벤트 리스너를 scroll, resize 및 orientationChange 이벤트에 사용한다.
const lazyloading = () => {
  const lazyloadImages = document.querySelectorAll("img.lazy");

  let lazyloadThrottleTimeout;
  const lazyload = () => {
    if (lazyloadThrottleTimeout) {
      clearTimeout(lazyloadThrottleTimeout);
    }
    lazyloadThrottleTimeout = setTimeout(() => {
      const scrollTop = window.scrollY;
      lazyloadImages.forEach((img) => {
        if (img.offsetTop < window.innerHeight + scrollTop) {
          // img.offsetTop: 실질적으로 img가 위치한 높이
          img.src = img.dataset.src;
          img.classList.remove("lazy");
        }
      });
      if (lazyloadImages.length == 0) {
        document.removeEventListener("scroll", lazyload);
        window.removeEventListener("resize", lazyload);
        window.removeEventListener("orientationChange", lazyload);
      }
    }, 20);
  };
  document.addEventListener("scroll", lazyload);
  window.addEventListener("resize", lazyload);
  window.addEventListener("orientationChange", lazyload);
};
document.addEventListener("DOMContentLoaded", lazyloading);

  • 나머지 코드
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <header>
      <h1 class="pageTitle">Infinity scroll</h1>
    </header>
    <article id="article">
      <div class="block">
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem
          mollitia accusamus sequi ipsa, rerum nam laboriosam, ipsam aperiam
          deleniti beatae expedita id quisquam veritatis corporis, voluptates
          ducimus molestiae eum adipisci.
        </p>
      </div>
      <div class="block">
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem
          mollitia accusamus sequi ipsa, rerum nam laboriosam, ipsam aperiam
          deleniti beatae expedita id quisquam veritatis corporis, voluptates
          ducimus molestiae eum adipisci.
        </p>
      </div>
      ... 반복
    </article>
  </body>
  <script src="index.js"></script>
</html>
.pageTitle {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 52px;
  line-height: 52px;
  color: #fff;
  text-align: center;
  background: #111;
}
article {
  padding: 52px 3% 0;
}
article .block {
  padding: 20px;
  min-height: 500px;
}
article .block p {
  line-height: 22px;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
}
article .block:nth-child(2n + 1) {
  background: #999;
}
article .block:nth-child(2n) {
  background: #222;
}

0개의 댓글