1) lazy loading은 콘텐츠 전달 최적화와 최종 사용자 간의 경험을 간소화 하는 균형을 맞춥니다.
2) 사용자가 처음 열 때 웹 사이트의 일부만 다운로드 해야하므로 사용자에게 콘텐츠를 더 빨리 제공합니다.
3) 콘텐츠가 지속적으로 사용자에게 공급되므로 사용자가 웹사이트를 이탈할 확률을 낮출 수 있습니다.
4) 사용자가 한 번에 필요로 하는 경우에만 콘텐츠를 불러오므로 리소스 비용(사용자의 배터리, 시간, 시스템 리소스)이 낮아진다.
출처 -https://scarlett-dev.gitbook.io/all/it/lazy-loading-
<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는 특정 요소의 교차점 변경 사항을 관찰하는 방법을 제공한다.
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가 교차점에 들어오면 콜백 함수가 실행되게 된다.
이러한 방식들로 페이지에 액세스할 때 모든 콘텐츠를 대량으로 로드하는 대신 사용자가 필요한 페이지의 일부에 액세스할 때 콘텐츠를 로드할 수 있게된다.