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