Lazy Loading을 이용한 웹 페이지의 로딩 에러 처리 방법

10 Nov 2023

javascript

웹 페이지의 로딩 속도는 사용자 경험에 큰 영향을 미치는 요소입니다. 느린 로딩 속도는 사용자들이 웹 페이지를 떠나고 다른 사이트를 찾아보는 원인이 될 수 있습니다. 이러한 문제를 해결하기 위해 Lazy Loading을 사용하는 것이 유용합니다. Lazy Loading은 페이지 로딩 시에 필요한 이미지나 콘텐츠를 지연하여 로딩하는 방식으로, 화면에 필요한 것들만 로딩하여 로딩 시간을 단축시키는 방법입니다.

Lazy Loading의 작동 방식

Lazy Loading은 기본적으로 뷰포트 내에 있는 요소들만 로딩하는 방식으로 동작합니다. 뷰포트는 사용자가 현재 볼 수 있는 영역을 의미하며, 사용자가 스크롤하면서 새로운 요소가 뷰포트에 진입하면 해당 이미지나 콘텐츠를 로딩합니다. 이렇게하면 사용자가 접속한 페이지의 초기 로딩 시간을 단축할 수 있습니다.

로딩 에러 처리 방법

Lazy Loading을 구현하는 과정에서 로딩 에러가 발생할 수도 있습니다. 로딩 에러는 이미지 URL이 잘못되었거나 서버에서 이미지를 가져오지 못하는 경우 등 다양한 원인으로 발생할 수 있습니다. 이러한 로딩 에러를 처리하는 방법으로는 다음과 같은 접근 방식을 사용할 수 있습니다.

에러 핸들링: Lazy Loading을 구현할 때 정의된 에러 핸들링 함수를 사용하여 로딩 도중 발생하는 에러를 처리합니다. 이 함수를 사용하여 문제가 발생한 요소를 대체하는 방식으로 로딩 에러를 처리할 수 있습니다.
```
function handleLoadingError(event) {
  event.target.src = 'placeholder-image.jpg'; // 에러 발생 시 대체 이미지로 대체
}
```
로딩 상태 확인: Lazy Loading을 적용할 때 로딩 상태를 확인하는 방법도 사용할 수 있습니다. 예를 들어, 이미지가 로딩되지 않는 경우 onerror 이벤트를 사용하여 에러를 감지하고 대체 콘텐츠를 로딩할 수 있습니다.
```
<img src="image.jpg" alt="Lazy-loaded Image" onerror="this.src='placeholder-image.jpg'">
```

다시 시도: 에러가 발생했을 경우 다시 시도할 수도 있습니다. 에러가 발생한 요소를 다시 로딩하려고 할 때 정해진 횟수만큼 재시도를 하거나, 일정 시간이 지난 후 다시 시도하는 등의 방식으로 로딩 에러를 처리합니다.

function retryLoading(event, maxRetryCount, retryDelay) {
  const target = event.target;
  let retryCount = 0;
     
  const retry = setInterval(() => {
    if (retryCount >= maxRetryCount) {
      clearInterval(retry);
      return;
    }
       
    target.src = target.getAttribute('src');
    retryCount++;
  }, retryDelay);
}

Lazy Loading을 적용하여 웹 페이지의 로딩 속도를 향상시킬 수 있지만, 로딩 에러가 발생할 수도 있습니다. 위에서 소개한 방법들을 사용하여 로딩 에러를 처리하고, 사용자에게 원활한 경험을 제공할 수 있도록 개선해보세요.

참고 자료: MDN Web Docs - Lazy Loading #WebDevelopment #LazyLoading