Intersection Observer 이미지 지연 로딩

const options = {
  // null을 설정하거나 무엇도 설정하지 않으면 브라우저 viewport가 기준이 된다.
  root: null,
  // 타겟 요소의 20%가 루트 요소와 겹치면 콜백을 실행한다.
  threshold: 0.2
}

// Intersection Observer 인스턴스
const observer = new IntersectionObserver(function(entries,observer) {
  entries.forEach(entry => {
    // 루트 요소와 타겟 요소가 교차하면 dataset에 있는 이미지 url을    타겟요소의 src 에 넣어준다.
    if (entry.isIntersecting) {
      //타겟 요소의 src 속성의 값을 dataset 의 이미지 url 로 교체
      entry.target.src = entry.target.dataset.src
      
      // 지연 로딩이 실행되면 unobserve
      observer.unobserve(entry.target)
    }
  })
}, options)

const imgs = document.querySelectorAll('img')
imgs.forEach((img) => {
  // img들을 observe한다.
  observer.observe(img)
})

 

 

https://developer.mozilla.org/ko/docs/Web/API/Intersection_Observer_API

https://heropy.blog/2019/10/27/intersection-observer/

https://velog.io/@elrion018/%EC%8B%A4%EB%AC%B4%EC%97%90%EC%84%9C-%EB%8A%90%EB%82%80-%EC%A0%90%EC%9D%84-%EA%B3%81%EB%93%A4%EC%9D%B8-Intersection-Observer-API-%EC%A0%95%EB%A6%AC