Vanilla JS Lazy Loading

순수 JavaScript와 Intersection Observer를 활용한 이미지 지연 로딩

핵심:Vanilla JS + Intersection Observer - 순수 JavaScript로 직접 DOM 요소에 lazy loading 적용, rootMargin: '50px'로 뷰포트 50px 전에 미리 로딩 시작

✅ 장점: 간단한 구현, 가벼운 번들 크기, 직접적인 DOM 제어, 성능 최적화, 프레임워크 의존성 없음, 미리 로딩으로 부드러운 UX

❌ 단점: 모던 브라우저 필요 (Intersection Observer API), 초기 로딩 시 빈 공간, 수동 DOM 관리, 추가 네트워크 요청

💡 사용 시나리오: 가벼운 웹사이트, 성능이 중요한 프로젝트, 프레임워크 사용 불가능한 환경, 정확한 로딩 시점 제어가 필요한 경우

🔧 동작 방식:threshold: 0으로 요소가 1픽셀이라도 보이면 감지,rootMargin: '50px'로 뷰포트 경계 50px 전에 미리 로딩 시작