2021.05.04 - [기록/Today I learned] - 2021 05 04 - 이슈 수정을 위한 infinite scroll 연구
(지난번과 이어서)
<!-- DOCTYPE을 작성해 주지 않으면 document의 높이를 제대로 못 가져오는 이슈가 있다. -->
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div style="display: grid" id="contents">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTJgXGbKxsB6nA-kjLKFFrKlbKwDa58hVBVuQ&usqp=CAU">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTofJtv2DtHXAJ8m36voy56Mk-Ckm2TLZm0Vz-cLV0k6hPzIckF&usqp=CAU">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTJgXGbKxsB6nA-kjLKFFrKlbKwDa58hVBVuQ&usqp=CAU">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTofJtv2DtHXAJ8m36voy56Mk-Ckm2TLZm0Vz-cLV0k6hPzIckF&usqp=CAU">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTJgXGbKxsB6nA-kjLKFFrKlbKwDa58hVBVuQ&usqp=CAU">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTofJtv2DtHXAJ8m36voy56Mk-Ckm2TLZm0Vz-cLV0k6hPzIckF&usqp=CAU">
</div>
<script>
var scrollControl = (() => {
/*
* scroll이 일정 지점에 도달하는 순간 true를 반환한다.
*/
function isScrollEnd(){
//pageYOffset = 스크롤의 현재 높이 (얼만큼 깊게 스크롤했는지!)
//document.documentElement = html임 따라서 html 태그의 높이!
let htmlScrollHeight = document.documentElement.scrollHeight //html문서 전체 크기!
let currentHeight = window.pageYOffset + document.documentElement.clientHeight //화면에 보이는영역 + 스크롤해서 내려간영역 = 사용자가 현재까지 본 영역!
console.log(currentHeight, htmlScrollHeight)
return currentHeight >= (htmlScrollHeight * 90/100) //전체 컨텐츠의 80%를 보면 트리거 발생!
}
var page = 0
function getImages(){
let imageArray =
[
[
'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS1yoq0jZ_yGeP3LBv4-bmrPRy6rKFACgIg9w&usqp=CAU',
'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR9fF2PhdlPCx9v8pU-buzwSHUCrBm1BkpUGg&usqp=CAU',
'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQZAemi3EgLIJ1DOLHqWoNdwyiFju9Vz_7PyQ&usqp=CAU',
'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSHKd4aHdC9Q9ohjYdGuTMas_pX4MI5ifABwA&usqp=CAU',
'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTQ9-hJGMggFrzuyhVAsQehY-7INklynwZfcQ&usqp=CAU'
]
]
return function() {
return new Promise((resolve, reject) => {
setTimeout(function(){
resolve(imageArray[0])
}, 250);
})
}
}
function addImages(imageArr){
if(!imageArr) return
let contents = document.getElementById('contents')
for(let index = 0; index < imageArr.length; index++){
var tmpImgElm = document.createElement('IMG')
tmpImgElm.src = imageArr[index]
contents.append(tmpImgElm)
console.log(tmpImgElm)
}
}
return {
scrollEvent : function(){
let lastCall = 0
let delay = 500; //ms 단위
return function (){
const now = (new Date).getTime()
if(now - lastCall < delay){
return
}
if(isScrollEnd()){
getImages()().then(addImages)
}
lastCall = now
}
}
}
})()
window.addEventListener('scroll', scrollControl.scrollEvent());
</script>
</body>
</html>지난번 코드를 응용해서 간단하게 무한스크롤을 구현할 수 있었다.
남은 고민들
'Today I learned' 카테고리의 다른 글
| 2021 05 31 - git린이의 모험 pull request (0) | 2021.05.31 |
|---|---|
| 2021 05 26 - github Action 맛보기 (0) | 2021.05.26 |
| 2021 05 04 - 이슈 수정을 위한 infinite scroll 연구 (1) | 2021.05.04 |
| 2021 05 03 - openssl_conf 환경변수는 openssl.cnf파일명까지 작성해 줘야 한다. (0) | 2021.05.03 |
| 2021 04 30 - 티스토리 최근 3개월 포스팅여부 가져오기 (작성중) (0) | 2021.04.30 |
댓글