[Javascript] lazy loading, 이미지 로딩 시 부드럽게 표현하기

 

---

 

이미지 로딩 시간이 길면 구글 검색 알고리즘에 영향을 미칠 수 있다는 글을 보았습니다. 페이지에 이미지 렌더링 하는 시간을 어떻게 줄일 수 있을지 검색하다가 lazy loading이라는 방법을 확인했습니다.

lazy loading은 사용자가 화면을 보기 직전 순간까지 이미지를 로드하지 않다가 필요할 때 로드하여, 초기 페이지 로드 시간을 줄이고 불필요한 데이터 전송량을 감소시켜 전체적인 웹사이트 성능을 개선하는 방법입니다.

 

html 세팅은 다음과 같습니다. <img> 태그에 attribute를 src 외에 data-src 하나 더 두는 것입니다. 

<div>
    <img class="lazy-load" data-src="real-image.jpg" src="sample.jpg" alt="Lazy Load Example">
</div>

data-src는 src에 전달할 이미지 path를 잠시 담아두려는 목적을 갖고 있기 때문에 이름을 변경하셔도 괜찮습니다.

 

이렇게 html를 준비했다면, 사용자가 웹 페이지를 스크롤 하다가 이미지에 도달했을 때 src 속성을 변경하면 되겠죠?

그저 data-src 내용을 src에 담으면 됩니다.

$(document).ready(function() {
/* 자원이 로드 되면 */

    $(window).scroll(function() {
    	/* 사용자가 스크롤 시 */
        
        $('.lazy-load').each(function() {
            /* 이미지가 뷰포트 내에 있는지 확인 */
            if ($(this).offset().top < $(window).scrollTop() + $(window).height()) {
                var img = $(this);
                var realSrc = img.data('src');
                img.attr('src', realSrc);
                img.removeClass('lazy-load');
            }
        });
    });
});

 

요새 좋은 라이브러리도 많이 나왔으니, 사용법을 숙지할 시간이 있다면 라이브러리를 활용하셔도 좋을 것 같습니다.

 

 

---