이미지 로딩은 웹 페이지의 성능과 사용자 경험에 큰 영향을 미칩니다. 특히 이미지가 많은 웹 페이지의 경우, 모든 이미지를 한 번에 로드하면 페이지 로딩 속도가 저하될 수 있습니다. 이런 문제를 해결하기 위해 Lazy Loading 기법을 사용할 수 있습니다. Lazy Loading은 필요한 순간에만 이미지를 로딩하는 방식으로, 페이지 로딩 속도를 향상시키고 데이터 사용량을 줄일 수 있습니다.
자바스크립트를 사용하여 Lazy Loading을 구현하는 방법은 여러가지가 있지만, 이미지 로딩 상태를 시각적으로 표시하는 방법은 사용자에게 로딩이 진행 중인지를 알려주어 UX를 향상시킬 수 있습니다. 아래는 이미지 로딩 상태를 시각적으로 표시하는 자바스크립트 Lazy Loading 기법의 예시 코드입니다.
// Lazy Loading을 위한 Intersection Observer 객체 생성
const observer = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
// 이미지가 화면에 보일 때 이미지를 로드하고 로딩 상태 표시
const image = entry.target;
image.src = image.dataset.src;
image.classList.add("loading");
observer.unobserve(image);
}
});
});
// Lazy Loading할 이미지를 선택하여 Intersection Observer에 등록
const lazyImages = document.querySelectorAll(".lazy-image");
lazyImages.forEach(image => {
observer.observe(image);
});
위의 코드에서는 Intersection Observer를 사용하여 화면에 이미지가 보일 때 이미지를 로드하고, 로딩 상태를 표시하는 방식을 구현하였습니다. “lazy-image” 클래스를 가진 이미지들을 선택하여 Intersection Observer에 등록하고, 이미지가 화면에 보일 때 isIntersecting 속성을 이용해 이미지를 로드하고 로딩 상태를 표시하는 CSS 클래스를 추가합니다.
주의할 점은 Lazy Loading을 구현할 때 이미지의 실제 경로를 data-src 속성에 저장하고, src 속성을 비워두어야 한다는 것입니다. 이렇게 하면 처음에는 이미지가 로드되지 않고 Lazy Loading이 필요한 시점에 이미지를 실제 로드합니다.
참고 자료:
#lazyloading #javascript