무한 스크롤

강의

unsplash 사이트에서 가져온 사진들을 꼐속 출력해 끊김없이 스크롤 다운이 되는 무한 스크롤 페이지.
이미지에 갖다대면 설명이 나오고 클릭시 이미지 주소로 넘어감.

로딩이미지
https://jjig810906.tistory.com/37
https://www.udemy.com/course/javascript-web-projects-to-build-your-portfolio-resume/learn/lecture/19961164#content

사이트에서 요런 로딩이미지를 svg 애니메이션으로 가져오는데에 성공.

이제 전체 코드의 흐름을 보도록 하자.

getphoto를 통해 api 데이터를 가져오도록 하고 fetch로 요청을 보냄.
서버에서 요청을 반환해 responese에 반환하고, 이렇게 얻게된 사진의 json 데이터를 가지고 배열에 저장.
displayphoto가 실행되며 사진 배열을 이용해서.
배열에 담긴 사진들을 출력함.

.setAttribute()는 선택한 요소(element)의 속성(attribute) 값을 정합니다. element.setAttribute( 'attributename', 'attributevalue' )

이걸 사용해 사진 배열의 요소를 써서 실제 문서의 사진을 바꾸자.

중복되는 setattirbute를 function화 하자.

// DOM 요소에 setattribute 사용.
function setAttributes(element, attributes) {
  //변경 요소와 변경사항을 받음.
  for (const key in attributes) {
    element.setAttribute(key, attributes[key]);
  }
}

무한 스크롤 구현

무한 스크롤을 어떻게 할지 생각해 보자.

window.innerHeight는 브라우저창의 전체 높이.(즉 현재 보이는 창의 길이.)
window.scrollY는 스크롤을 내린 상단까지의 거리.

document.body.offsetHeight는 창에 나타나지 않은 (배열에 들어가만 있는 이미지의 길이) 것까지 모두 포함한 값.

이 세개의 값을 가지고 무한 스크롤을 구현하자.

스크롤이 화면 아래에 가까이 있으면 더 많은 사진을 로드하기.

window.addEventListener('scroll', () =>{
    if(window.innerHeight + window.scrollY >= document.body.offsetHeight - 1000){
    //1000px은 일반적으로 문서의 최댓값. 즉 그걸 뺀다는건, 순수하게 가져온 이미지들의 전체 길이의 합을 계산한다는 것. 그리고 이거 이상이라는건 이미지들이 다 나가서 더이상 출력될게 없다는 걸 뜻하니 이미지를 더 로드해야 한다.
    ready = false;
    getPhotos();//따라서 이미지를 더 가져옴.
    }
});