Lazy Loading

Image Lazy Loading이란?

페이지 안에 있는 실제이미지들이 화면에 보여질 필요가 있을때 로딩 할수 있게끔 하는 기술입니다.

1. 성능 향상

페이지 초기 로딩시 필요한 이미지의 수, 용량을 줄일 수 있다.

- 초기 보여지는 이미지를 placeholder를 적용하거나 압축된 이미지를 사용

 

How to use?

HTML

<img class="lazy" data-src="./images/1.jpg" src="./images/sub.jpg" alt="권은비 사진">

JS

document.addEventListener("DOMContentLoaded", function() { 
    let lazyImages = [].slice.call(document.querySelectorAll("img.lazy"))
    let active = false
    const lazyLoad = function() {   
      if (active === false) {
        active = true 
        setTimeout(()=> { 
          lazyImages = lazyImages.map((lazyImage) => {   
            if (lazyImage.getBoundingClientRect().top <= window.innerHeight && window.getComputedStyle(lazyImage).display !== "none") {   
              lazyImage.src = lazyImage.dataset.src
              lazyImage.classList.remove("lazy")  
              return null
            }else return lazyImage
          }).filter(image => image)
          if (!lazyImages.length) {
            document.removeEventListener("scroll", lazyLoad)
          }else active = false
        }, 200)
      }
    }
    document.addEventListener("scroll", lazyLoad)
  });

 

처음 기초 이미지 사진(장원영) 에서 권은비 (원본이미지)로 변하는 LazyImage가 적용된 모습