[JS] Lazy Loading 기법을 이용하여 이미지의 로딩을 미루는 방법

Lazy Loading 기법이란?

• Lazy Loading은 페이지 내에서 실제로 필요로 할 때까지 리소스의 로딩을 미루는 것이다. 사용자가 페이지를 열었을 때, 즉 페이지를 로드하자마자 리소스를 로딩하는 일반적인 방식 대신, 실제로 사용자 화면에 보여질 필요가 있을 때까지 이러한 로딩을 지연하는 것이다.

장점

1) lazy loading은 콘텐츠 전달 최적화와 최종 사용자 간의 경험을 간소화 하는 균형을 맞춥니다.
2) 사용자가 처음 열 때 웹 사이트의 일부만 다운로드 해야하므로 사용자에게 콘텐츠를 더 빨리 제공합니다.
3) 콘텐츠가 지속적으로 사용자에게 공급되므로 사용자가 웹사이트를 이탈할 확률을 낮출 수 있습니다.
4) 사용자가 한 번에 필요로 하는 경우에만 콘텐츠를 불러오므로 리소스 비용(사용자의 배터리, 시간, 시스템 리소스)이 낮아진다.

출처 -https://scarlett-dev.gitbook.io/all/it/lazy-loading-

예제

• data-src 사용
  일반적으로 이미지를 로드하기 위해서는 src라는 속성을 사용하는데, 브라우저가 src 속성을 가지면 몇번째 순서에 있던 무조건 로드를 하게 된다. 하지만 data-src 속성을 이용하면 이러한 로딩을 지연시킬 수 있다.

<img data-src="image.jpg">

이런식으로 설정해 두면 브라우저는 image를 로드하지 않는다.

var img = document.querySelector('img');
img.src = img.dataset.src;

대신 js코드에서 dataset 객체를 이용하여 data-src 속성 값을 읽어와서 src 속성에 설정하면 이미지가 로드된다. 이렇게 설정하면, 이미지가 실제로 필요할 때까지 로딩을 지연시킬 수 있다

• 브라우저 내장 기능 사용

<img src="image.jpg" loading="lazy">

img 태그에 loading 속성을 lazy로 설정하게 되면 브라우저가 이미지의 로딩을 지연시킨다.
이렇게 설정해두면 이미지는 사용자가 그 이미지 위치에 도달할 때까지 로딩되지 않는다.

• Intersection Observer API 사용

Intersection Observer API는 특정 요소의 교차점 변경 사항을 관찰하는 방법을 제공한다.

const faders = document.querySelectorAll('.fade-in');
const appearOptions = { threshold: 0.4 };
const appearOnScroll = new IntersectionObserver(function(entries, appearOnScroll) {
    entries.forEach(entry => {
        if (!entry.isIntersecting) return;
        // Do something cool here
    });
}, appearOptions);
faders.forEach(fader => {
    appearOnScroll.observe(fader);
});

위의 코드에서 faders는 lazy loading할 이미지 요소들이다. appearOptions는 IntersectionObserver의 옵션으로 threshold 값을 설정한다.
appearOnScroll은 IntersectionObserver 인스턴스로, 각각의 entry가 교차점에 들어오면 콜백 함수가 실행되게 된다.

이러한 방식들로 페이지에 액세스할 때 모든 콘텐츠를 대량으로 로드하는 대신 사용자가 필요한 페이지의 일부에 액세스할 때 콘텐츠를 로드할 수 있게된다.