이미지 로딩을 위한 자바스크립트 Lazy Loading CDN 설정 방법

10 Nov 2023

javascript

이미지 렌더링은 웹 페이지의 성능에 영향을 주는 중요한 요소입니다. 이미지가 많은 페이지에서는 모든 이미지를 동시에 로드하면 페이지 로딩 속도가 느려질 수 있습니다. 이러한 문제를 해결하기 위해 “Lazy Loading”이라는 기술을 사용할 수 있습니다.

Lazy Loading은 이미지가 브라우저 뷰포트에 진입할 때까지 이미지를 로드하지 않고, 필요한 순간에만 로드하는 방식입니다. 이를 통해 사용자는 보여지는 이미지를 빠르게 로딩할 수 있고, 로딩되지 않은 이미지는 필요한 시점에 로딩되기 때문에 페이지의 전체 로딩 속도를 향상시킬 수 있습니다.

이제 자바스크립트 Lazy Loading을 적용하기 위해 CDN을 설정하는 방법을 알아보겠습니다.

CDN을 이용한 Lazy Loading 라이브러리 선택

여러 가지 자바스크립트 Lazy Loading 라이브러리가 존재하지만, 이번 예시에서는 lozad.js를 사용하도록 하겠습니다. lozad.js는 가볍고 간단하며 유연한 기능을 제공하는 인기 있는 라이브러리입니다.

CDN을 통한 lozad.js 로딩

먼저, lozad.js를 불러오기 위해 CDN을 설정해야 합니다. HTML head 엘리먼트 안에 다음 코드를 추가하여 lozad.js를 로드할 수 있습니다.

<head>
  <script src="https://cdn.jsdelivr.net/npm/lozad@1.14.0/dist/lozad.min.js"></script>
</head>

위 코드를 추가하면, lozad.js가 로드되어 사용할 준비가 완료됩니다.

이미지에 Lazy Loading 적용하기

이제 로딩을 지연시킬 이미지에 Lazy Loading을 적용해보겠습니다. img 엘리먼트에 data-src 속성을 추가하고, 이미지의 src 속성에는 로딩 중에 보여질 대체 이미지를 지정합니다.

<img data-src="path/to/your-image.jpg" src="path/to/placeholder-image.jpg" class="lozad" />

위 예시에서 data-src 속성에 실제 이미지의 경로를, src 속성에는 로딩 중에 보여질 대체 이미지의 경로를 지정하면 됩니다. 추가적으로 class에 lozad를 적용하여 이미지가 로딩되는 동안 로딩 애니메이션 등을 제어할 수 있습니다.

스크립트 설정

마지막으로 lozad.js를 사용하기 위해 스크립트를 추가해야 합니다. HTML 파일의 가장 하단에 다음 코드를 추가하세요.

<script>
  const observer = lozad('.lozad'); // .lozad는 Lazy Loading을 적용할 요소의 클래스명입니다.
  observer.observe();
</script>

위 코드는 라이브러리에서 제공하는 관찰자(observer)를 생성하고, 관찰을 시작하도록 지시하는 역할을 합니다. lozad 함수에는 lozad 클래스를 갖는 요소들을 전달합니다.

이제 이미지 로딩을 위한 자바스크립트 Lazy Loading CDN 설정이 완료되었습니다. 웹 페이지에 로드되는 이미지가 많을 경우, Lazy Loading을 사용하여 페이지의 성능을 향상시켜보세요!

참고 문서:

lozad.js GitHub 저장소: https://github.com/ApoorvSaxena/lozad.js
lozad.js 공식 문서: https://github.com/ApoorvSaxena/lozad.js