많은 웹 페이지에서 많은 양의 콘텐츠를 효율적으로 로드하기 위해 “Lazy Loading”이라는 개념을 사용합니다. Lazy Loading은 사용자가 페이지를 스크롤할 때 필요한 콘텐츠만 로드해 성능을 최적화하는 기술입니다. 이 기술은 웹 사이트의 로딩 속도를 향상시키고 데이터 소비를 줄여주는 중요한 역할을 합니다.
1. Intersection Observer API 사용
Lazy Loading을 구현하기 위해 JavaScript의 Intersection Observer API를 사용할 수 있습니다. 이 API를 사용하면 요소가 뷰포트 안에 들어오거나 뷰포트를 벗어났을 때를 바로 감지할 수 있습니다.
const lazyLoad = (target) => {
const io = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const img = entry.target;
const src = img.getAttribute('data-lazy');
img.setAttribute('src', src);
img.classList.add('fade');
observer.unobserve(img);
}
});
});
io.observe(target);
};
const images = document.querySelectorAll('img.lazy');
images.forEach(image => {
lazyLoad(image);
});
위의 예시에서 img.lazy 선택자를 사용하여 로딩 지연되는 이미지들을 선택합니다. data-lazy 속성을 활용하여 이미지의 실제 소스를 추출하고 해당 소스를 이미지의 src 속성에 할당합니다. 이후 fade 클래스를 이미지에 추가해 페이드 효과를 주고, Intersection Observer를 더 이상 사용하지 않도록 이미지를 언옵저빙합니다.
2. jQuery 사용
Lazy Loading을 구현하는 또 다른 방법은 jQuery 플러그인을 사용하는 것입니다. jQuery Lazy Load 플러그인은 기존의 이미지 로딩 방식을 고려하여 이미지를 지연시키며, 사용자가 스크롤 할 때 이미지를 동적으로 로드합니다.
// jQuery 라이브러리를 페이지에 포함해야 합니다.
$('img.lazy').lazy({
effect: 'fadeIn',
threshold: 200
});
위의 예시에서 $('img.lazy') 선택자를 사용하여 로딩 지연되는 이미지들을 선택하고, .lazy() 메서드를 사용하여 Lazy Loading을 적용합니다. effect 옵션은 이미지가 보여질 때의 효과를 설정하고, threshold 옵션은 이미지가 로드되기 전에 뷰포트 기준으로 멈춰야 할 거리를 설정합니다.
두 예시 모두 효율적인 Lazy Loading을 구현하는 방법입니다. 사용자가 페이지를 스크롤할 때 불필요한 데이터를 미리 로드하지 않고 필요한 시점에만 로딩되므로 웹 페이지의 성능을 향상시킬 수 있습니다.
참고 자료: