이미지는 웹 페이지의 중요한 부분입니다. 하지만 모든 이미지를 페이지 로드 시점에 함께 로딩하는 경우, 페이지의 성능에 부정적인 영향을 미칠 수 있습니다. 특히, 이미지가 많고 큰 경우에는 페이지의 로딩 시간이 길어질 수 있습니다. 이를 해결하기 위해 “게으른 이미지 로딩”이라는 기법을 사용할 수 있습니다.

게으른 이미지 로딩은 페이지가 로드될 때 보이는 이미지만 초기에 로드하고, 나머지 이미지는 필요한 시점에 로드하는 방식입니다. 이를 통해 초기 로딩 시간을 단축하고, 사용자가 실제로 이미지를 볼 수 있는 시점에 로드하여 사용자 경험을 향상시킬 수 있습니다.

자바스크립트를 이용하여 게으른 이미지 로딩을 구현할 수 있습니다. 다음은 간단한 예제 코드입니다:

// HTML
<img src="placeholder.jpg" data-src="image.jpg" class="lazy-image">

// JavaScript
document.addEventListener("DOMContentLoaded", function() {
  var lazyImages = document.querySelectorAll(".lazy-image");

  lazyImages.forEach(function(image) {
    var observer = new IntersectionObserver(function(entries, observer) {
      entries.forEach(function(entry) {
        if (entry.isIntersecting) {
          var img = entry.target;
          img.src = img.dataset.src;
          observer.unobserve(img);
        }
      });
    });

    observer.observe(image);
  });
});

위 코드에서는 lazy-image 클래스를 가진 이미지 엘리먼트에 data-src 속성을 추가하였습니다. 초기에는 placeholder.jpg와 같은 로딩 이미지를 보여주고, 실제 이미지는 data-src 속성에 저장된 주소로 교체하여 로드합니다.

Intersection Observer를 이용하여 이미지가 화면에 보여지는 시점을 감지하여 로드하는 방식으로 구현하였습니다. 이를 통해 스크롤에 따라 필요한 이미지만 로드할 수 있습니다.

추가적으로, CSS를 이용하여 로딩 이미지에 스타일을 적용하고 로딩 중에 로딩 이미지를 보여주는 것도 가능합니다.

게으른 이미지 로딩은 사용자 경험을 향상시키고 페이지의 성능을 개선하는 강력한 기법입니다. 자바스크립트를 이용하여 손쉽게 구현할 수 있으므로, 이미지가 많은 웹 페이지에서는 적용해보는 것을 권장합니다.

#references #javascript #lazyloading