lozad JS

lozad js

lozad.js는 이미지 지연 로딩에 특화된 Intersection API 구현 사례라고 할 수 있다.
복잡한 설정 필요 없이 이미지 태그에 라이브러리가 요구하는 속성을 추가한 후
옵저버 인스턴스를 생성하면 이미지 지연 로딩이 간단히 구현된다.

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/lozad/dist/lozad.min.js"></script>

해당 스크립트를 우선적으로 기입!

💡 image 태그에는 src 속성 대신 data-src에 이미지의 경로를 할당하고 lozad라는 이름의 클래스 이름을 추가해야 한다. (클래스명은 인스턴스 옵션으로 바꿀 수 있다)

<img class="lozad" data-src="image.png" />

const observer = lozad(); // 옵션을 지정하지 않으면 lozad라는 클래스가 붙은 이미지 태그를 지연 로딩한다.
observer.observe();

이것이 전부다. lozad.js는 앞서 설명한 Intersection Observer를 사용하는 과정에서 타겟 요소를 설정하고 이미지 불러오는 로직을 자동으로 처리해주기에 지연 로딩을 무척 간단히 구현할 수 있다. 물론 Intersection API에서 제공하는 rootMargin, threshold, 콜백 함수도 사용할 수 있다.

css에서 background를 사용해 넣은 이미지는?

---

대부분 img의 경우는 background를 사용해 url로 받아오는 경우가 비일비재하다.

하지만 이와 같은 경우에는 위의 방법으로 한다면 적용이 되질 않아 새로운 방법을 찾게 되었다.

스크립트의 경우 위의 스크립트에서 좀 더 디벨롭을 하였다.

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/lozad/dist/lozad.min.js"></script>
<script>
  window.onload = function() {
    const observer = lozad('[data-background-image], .lozad', {
      loaded: function(el) {
        if (el.dataset.backgroundImage) {
          el.style.backgroundImage = `url('${el.dataset.backgroundImage}')`;
        } else if (el.dataset.src) {
          el.src = el.dataset.src;
        }
        el.classList.add('loaded');
      }
    });
    observer.observe();
  };
</script>

<li class="swiper-slide displaynone vis_pro">
    <a href="/event/read.html?product_no=49">
        <figure class="img-wrap"><span class="lozad" data-background-image="/web/img/main_vis01.png"></span></figure>
    </a>
</li>

.해당클래스 {
  display: block;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

---

위의 html코드에서 보는것과 같이 background를 지정한 태그에 클래스를 lozad 를 설정해주는건 동일하다! 하지만 기본 img태그 뒤에 사용되었던 data-src 가 아닌 data-background-image 라는 속성을 사용하여 링크를 연결해주면 위의 문제는 간단하게 해결이 된다.