많은 웹 페이지는 이미지, 동영상 및 기타 리소스로 인해 로딩 시간이 길어질 수 있습니다. 이로 인해 사용자 경험이 저하되고 웹 페이지의 성능이 떨어질 수 있습니다. Lazy Loading은 이러한 문제를 해결하기 위해 사용되는 기술입니다.
Lazy Loading은 초기 로딩 시 모든 리소스를 한 번에 불러오는 것이 아니라, 사용자가 스크롤링하거나 특정 요소가 보여질 때 해당 리소스를 동적으로 로드하는 방식입니다. 이를 통해 사용자가 웹 페이지를 빠르게 로드할 수 있으며, 필요한 리소스만 불러와 메모리와 네트워크 사용량을 줄일 수 있습니다.
Lazy Loading을 구현하기 위해서는 다음과 같은 단계를 따르면 됩니다.
-
라이브러리 또는 플러그인 추가 - 대부분의 프레임워크 및 라이브러리에서 이미 Lazy Loading을 구현 가능한 플러그인이나 컴포넌트를 제공합니다. 이를 활용하여 해당 기능을 간편하게 구현할 수 있습니다.
-
이미지와 비디오에 Lazy Loading 적용 - 웹 페이지에서 가장 많은 로딩 시간을 차지하는 리소스는 이미지와 비디오입니다. 이를 위해 이미지 및 비디오 태그에 Lazy Loading을 적용합니다. 사용자가 스크롤링하거나 특정 요소에 도달할 때, 해당 요소가 보이기 전까지는 해당 리소스를 로드하지 않습니다.
Ex:
<img src="placeholder.jpg" data-src="image.jpg" class="lazy-load">
- 스크롤 이벤트 리스너 추가 - 사용자가 스크롤을 할 때마다, 보이기 시작한 요소의 Lazy Loading을 트리거하는 스크롤 이벤트 리스너를 추가합니다. 이벤트 리스너를 활용하여 동적으로 리소스를 로드하고 페이지 성능을 향상시킬 수 있습니다.
Ex:
window.addEventListener('scroll', function() {
var lazyImages = document.querySelectorAll('.lazy-load');
for (var i = 0; i < lazyImages.length; i++) {
if (lazyImages[i].getBoundingClientRect().top < window.innerHeight) {
lazyImages[i].src = lazyImages[i].dataset.src;
lazyImages[i].classList.remove('lazy-load');
}
}
});
Lazy Loading을 사용하여 웹 페이지 성능을 향상시킬 수 있습니다. 이미지 및 비디오와 같은 리소스의 로딩 시간을 줄여 사용자 경험을 개선하고, 불필요한 네트워크 및 메모리 사용을 방지할 수 있습니다.
#[참고자료]#