✍️ 이미지 갤러리 페이지나, 리스트 페이지를 구현 할 때 첫 화면이 늦게 뜨는 것을 완화하고자 사용 하는 주된 기법이다. 플러그인, 스크롤 이벤트 함수를 사용 하는 방법도 있지만, 이번엔 API를 이용하는 방법에 대해 정리 해보았다.
Lazy loading 이란?
웹페이지를 열면, html, css, javscript, image 들을 한꺼번에 불러온다. 불러와야 할 리소스가 많게 되면 사용자가 페이지를 확인 해야 될 때까지 오래 걸린다.
➡️ 사용자 편의성 ⬇️
이를 개선하고자, 리소스 필요할 때 지연시켜 불러오는 기법을 Lazy loading 이라 한다.
주로 이미지를 불러올 때 사용하며, 스크롤 시, 사용자가 이미지를 보는 시점에 불러온다.
➕ infinite scroll( : 페이지를 이동하지 않아도 스크롤 시 계속 불러오기) 구현 시 에도 사용
사용 방법 - IntersectionObserver API 사용
IntersectionObserver
- 타겟 요소와 상위 요소 또는 최상위 document 의 viewport
사이의 intersection 내의 변화를 비동기적으로 관찰하는 방법
//0. 옵션 정의
const options = {
root: null, //default: null (브라우저의viewport), 관찰하려는 대상의 기준. ex)스크롤이 일어나는 부분 *safari 에서는 document로 지정이 안 됨.
rootMargin: '0px 0px 20px 0px', //설정에 따라 교차영역이 확장, 축소 됨. px, % 사용 가능
threshold: 0 //default: 1, 범위: 0~1, 0: 관찰 대상이 1px이라도 보였을 때, 1: 관찰 대상의 마지막 부분에 도달 했을 때
}
//1. intersectionObserver 등록
//callback 함수, options를 인자로 받음.
const io = new IntersectionObserver((entries, observer) => {
//callback 함수는 entries(:IntersectionObserverEntry 객체리스트) 와 observer(:self)를 인자로 받음
//* observer method
//1. obaserver.observe() : 타겟을 관찰 시작(등록)할 때 사용.
//2. observer.unobserve() : 타겟 관찰을 멈추고 싶을 때 사용.
//3. observer.disconnect() : 다수의 타겟 관찰 모두 멈출 때 사용.
//4. observer.takerecords() : 관찰 대상들(IntersectionObserverEntry) 객체 배열 리턴
//* IntersectionObserverEntry 속성
// 1. entry.boundingClientRect: 타겟element의 정보 반환
// 2. entry.rootBound: root element정보 반환
// 3. entry.intersectionRect: 교차된 영역(노출 된 부분) 정보 반환
// 4. entry.intersectionRatio: 교차영역에 타겟 element가 얼마나 교차 되었는지 비율에 대한 정보 반환, 범위: 0~1
// 5. entry.isIntersection: 타겟element가 교차영역에 있는 동안 true 반환, 아니면 false반환
// 6. entry.target: 타겟 element 반환
// 7. entry.time: 교차가 기록된 시간 반환
entries.forEach(entry => {
//console.log("entries", entries);
//console.log("observer",observer);
//2. 영역에 들어 왔을 때, 이미지 보이기
if (entry.isIntersecting) {
console.log(entry);
let src = entry.target.dataset.src
entry.target.style.backgroundImage = `url(${src})`;
entry.target.classList.add("show");
//3. observer:관찰 해제하기
observer.unobserve(entry.target);
}
})
}, options)
// 4. 이미지 박스들에다가 IntersectionObserver 이벤트를 걸어 준다
const boxes = document.querySelectorAll('.box');
boxes.forEach((el) => {
io.observe(el);
})참고 문헌
한 걸음 한 걸음 계속 걷는 자가 일류다