🐇 What is lazyload❓

실제 이미지가 화면에 보여질 필요가 있을 때, 로딩을 할 수 있는 기술

즉, 웹 페이지 내 바로 로딩을 하지 않고 로딩 시점을 뒤로 미루는 것

Image뿐 아니라 SPA내 JS파일 로드에도 사용할 수 있음

🐇 Why useing?

🥕 Improved Performance

성능향상은 웹 사이트 로딩 시간, 성능 관리 측면에서 가장 중요한 요소입니다.

lazy loading을 통해 리소스 요청을 줄이고, 다른 리소스를 더 빠르게 처리할 수 있어, 유저가 페이지를 확인할 때 더 빨리 확인하고 이용할 수 있습니다.

🥕 Cost Reduction

통신 비용 관점에 있어 절약할 수 있습니다. 대부분의 이미지 전달 관련은 전송 바이트 수에 기반하여 청구됩니다. 이미지가 보여지지 않으면 절대 로딩하지 않으므로, 페이지 내 전달할 용량이 줄어들어 전송비용이 감소됩니다.

🐇 How to use?

Image tag

이미지는 태그내 src속성을 통해 이미지는 로드됩니다. 즉 브라우저 내 이미지가 src속성을 가지고 있으면 이미지는 무조건 로드됩니다.

이를 방지하고자 이미지의 url을 다른 속성에 할당하여 이미지의 로딩을 지연시킵니다.

예를 들면 다음과 같습니다.

<img src="https://sampleImage.jpg">
↓
<img data-src="https://sampleImage.jpg">

이후 이미지를 로딩하는 방법은 이미지가 뷰포트에 들어왔을 때 로딩할 수 있도록 확인되어야 합니다.

🥕 JavaScript Event

scroll, resize, orientationChange 이벤트 리스너를 활용하는 방법입니다.

• lazy loading을 위해서 resize, orientationChange 이벤트는 같이 사용
• resize는 윈도우 브라우저 크기가 바뀔 때 발생
• orientationChange는 디바이스의 가로/세로가 변환될 때 발생

다음과 같은 순서로 Image lazy loading이 발생합니다

• 로딩이 지연되거나 되지 않은 이미지를 모두 찾음
• 윈도우 높이, 현재 스크롤 위치, 이미지 위치를 이용해 뷰포트로 들어온 이미지 판별
• 뷰포트 안에 들어오면 data-src속성을 src속성에 넣어 이미지 로드
• 로딩 지연을 판별하기 위해 선언한 lazy클래스 제거
• 모든 이미지가 로딩되면 이벤트 리스너 트리거 제거

document.addEventListener("DOMContentLoaded", function() {
	//이미지를 모두 찾음
  var lazyloadImages = document.querySelectorAll("img.lazy");    
  var lazyloadThrottleTimeout;
  
  function lazyload () {
    if(lazyloadThrottleTimeout) {
      clearTimeout(lazyloadThrottleTimeout);
    }    
    
    lazyloadThrottleTimeout = setTimeout(function() {
				//현재 뷰 포트
        var scrollTop = window.pageYOffset;
				//뷰 포트로 들어온 이미지 판별
        lazyloadImages.forEach(function(img) {
            if(img.offsetTop < (window.innerHeight + scrollTop)) {
							//src속성에 data-src속성 값 넣어 이미지 로드
              img.src = img.dataset.src;
							//lazy클래스 제거
              img.classList.remove('lazy');
            }
        });
				//이미지가 전부 로딩되면 이벤트 리스너 제거
        if(lazyloadImages.length == 0) { 
          document.removeEventListener("scroll", lazyload);
          window.removeEventListener("resize", lazyload);
          window.removeEventListener("orientationChange", lazyload);
        }
    }, 20);
  }
  
	//이벤트 리스너 적용
  document.addEventListener("scroll", lazyload);
  window.addEventListener("resize", lazyload);
  window.addEventListener("orientationChange", lazyload);
});

🥕 Intersection Observer API

요소가 뷰포트에 들어오는 것을 API가 감지합니다. 다음 순서에 따라 Image lazy loading이 동작합니다.

• 요소에 옵저버 부착
• 뷰포트에 요소가 들어왔음을 API가 감지
• isIntersecting속성으로 data-src의 url을 src속성으로 변경
• 전부 로드되면 lazy클래스명 삭제
• 부착했던 옵저버 제거

document.addEventListener("DOMContentLoaded", function() {
  var lazyloadImages;    

  if ("IntersectionObserver" in window) {
    lazyloadImages = document.querySelectorAll(".lazy");
    var imageObserver = new IntersectionObserver(function(entries, observer) {
      entries.forEach(function(entry) {
        if (entry.isIntersecting) {
          var image = entry.target;
          image.src = image.dataset.src;
          image.classList.remove("lazy");
          imageObserver.unobserve(image);
        }
      });
    });

    lazyloadImages.forEach(function(image) {
      imageObserver.observe(image);
    });
  } 
})

Intersection Observer를 활용하였을 때, 사용자가 스크롤 시 이미지가 느리게 나타나지 않습니다. 이벤트 리스너를 활용한 방식에서 timeout을 활용하여 약간의 딜레이가 발생하기 때문입니다.

🥕 Native lazy loading

이미지에 loading속성을 추가하면 lazy loading이 쉽게 구현됩니다. 아래는 loading속성에 사용하는 값입니다.

• lazy : 뷰 포트에서 일정 거리에 닿을 때가지 로딩을 지연시킵니다.
• eager : 현재 페이지 위치가 위/아래 어디에 있든 상관없이, 페이지가 로딩되자마자 해당 요소를 로딩합니다.
• auto : 로딩을 지연하는 것을 트리거합니다. 기본적으로 loading속성을 쓰지 않는것과 같습니다.

하지만, 로딩이 지연된 이미지가 불러와질 때, 다른 콘텐츠 내용이 밀려나는 것을 방지하기 위해서, 반드시 width/height 속성을 img태그 또는 inline style로 직접 값을 지정해야합니다.