이미지 지연 로딩

지연 로딩의 개념

실제 URL 저장하기

// Markup pattern:
// <img data-src="photo-large.jpg" alt="Scenery">
// The browser will not fetch anything until we set src.

지연 로딩할 이미지 선택하기

const lazyImages = document.querySelectorAll('img[data-src]');
console.log('found', lazyImages.length, 'lazy images');

관찰자 만들기

const observer = new IntersectionObserver((entries, obs) => {
  // handle entries here
}, { rootMargin: '100px' });

교차할 때 로드하기

const observer = new IntersectionObserver((entries, obs) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src; // triggers the download
    }
  });
}, { rootMargin: '100px' });

로드 후 관찰 중지하기

if (entry.isIntersecting) {
  const img = entry.target;
  img.src = img.dataset.src;
  obs.unobserve(img); // done watching this one
}

관찰 시작하기

lazyImages.forEach(img => observer.observe(img));

플레이스홀더 표시하기

img.addEventListener('load', () => {
  img.classList.add('loaded'); // CSS can fade it in
});
img.src = img.dataset.src;

네이티브 loading 속성

// Native approach (no JS needed):
// <img src="photo.jpg" loading="lazy" alt="...">

// Observer approach gives more control and effects.

data-src 정리하기

img.src = img.dataset.src;
img.removeAttribute('data-src');
obs.unobserve(img);

전체 패턴

빠른 확인

복습