이미지를 화면에 잡힐때만 로딩하고 싶을때. (loading = 'lazy')

이미지 용량이 크다. 그렇다고 정적인 이미지를 없애기도 그렇다.

 

하지만 화면에 잡히지도 않는 이미지가 다운이 된다면?

그만큼 호스팅시 클라이언트에게 전송되는 이미지데이터가 든다는 것이고,

따라서 낭비다.

 

# 예시

    <div id="carouselExampleDark" class="carousel carousel-dark slide">
      <div class="carousel-inner">
        <div class="carousel-item active">
          <img src="이미지 경로1" />
        </div>
        <div class="carousel-item">
          <img src="이미지 경로2" />
        </div>
        <div class="carousel-item">
          <img src="이미지 경로3" />
        </div>
      </div>
    </div>

이 코드는 총 이미지 세개가 carousel형식으로 보여지게 되는 부트스트랩 태그다.

 

처음 carousel에 이미지경로1의 이미지가 보여지게 된다.

그다음 이미지2, 이미지3이 뜬다.

다음버튼은 그냥 보기 편하게 안썼지만 다음 버튼을 누르면 이 이미지들이 버튼을 누를때마다 슬라이드로 보여진다.

 

근데 네트워크탭을통해 확인하면

이 carousel이 화면에 보여지는 순간, 이미지1,2,3이 전부 다운받아진다.

 

이미지 하나의 용량이 100mb라고 할때

화면에는 이미지1만 보이는데 carousel이 켜진순간 이미지 세장, 총 300mb가 다운받아지는것이다.

이는 호스팅비용의 낭비로 이어진다.

 

해결책은?

 

 

# loading = 'lazy' 속성

    <div id="carouselExampleDark" class="carousel carousel-dark slide">
      <div class="carousel-inner">
        <div class="carousel-item active">
          <img src="이미지 경로1" loading = 'lazy'/>
        </div>
        <div class="carousel-item">
          <img src="이미지 경로2" loading = 'lazy'/>
        </div>
        <div class="carousel-item">
          <img src="이미지 경로3" loading = 'lazy'/>
        </div>
      </div>
    </div>

이미지 태그에 저렇게 loading = 'lazy' 속성을 부여하게되면

이미지가 화면에 보여질때만 이미지를 다운받는다.

이건 개발자도구 네트워크탭에서 확인할수 있다.

 

 

 

# 추가

- carousel에서 만약 위 예시 태그로 세장의 이미지를 다 보고 다시 첫이미지를 보러간다면?

이미지 다운이 새로되는게아니라 다운받은이미지를 재사용해서 데이터를 더 받는게 아니다.

 

 

# 단점은?

이미지가 위의 예시처럼 100mb, 매우 크다면

carousel 페이지가 넘어갈때마다 이미지를 다운받는 시간이 필요하다.

처음 세장의 이미지를 전부 다운받고 다음버튼을 누를경우, 부드럽게 동작할테지만

loading = 'lazy'속성을 부여하면 다음버튼을 누를때마다 100mb를 다운받아야하니

carousel이 부자연스럽게 움직일것이다.