Image Lazy Loading

다수의 이미지가 존재하는 화면의 경우엔 이미지가 한꺼번에 로딩이되며 랜더링 속도가 저하된다. 

 

그리고 사용자가 모든 이미지를 다 보지 않을 경우엔 불필요한 이미지가 로딩되어 데이터가 낭비된다. 

 

랜더링 성능 향상 및 불필요한 데이터 낭비를 줄이기 위해 화면에 보여지는 항목만 이미지만 로딩될 수 있도록 조치가 필요한다. 

 

 

1. img 태그에 src 지정하지 않기. 

 

 

<img data-src="이미지 소스" style="opacity:0; width:50px; height:50px"/>

 

2. 이미지 로딩

   1) 스크롤 이벤트를 이용

   2) 화면에 보여질 Y축 포지션 값(bottomPos)을 설정

   3) 화면에 보여질 img 항목들을 필터링

   4) img의 top 포지션값이 bottomPos보다 작을 경우 src값을 설정

   5) opacity값을 변경하여 화면에 표시 (opacity : 0 -> 1)로 변경

// Simple Image Lazy Loading
$(window).scroll((function(imgObj){

  function visible(){
	// 현재 스크롤의 위치를 기준으로 화면에 보여질 bottom의 절대좌표값을 구한다. 
    // body의 높이 + 스크롤 이동값
    var bottomPos = $("body").outerHeight()+$(window).scrollTop();

    // 화면에 보여질 항목들을 선택하여 표시한다. 
    $(imgObj).filter(function(){

      if($(this).attr("src") == undefined 
      		&& $(this).position().top < bottomPos) {
		// data-src값을 src 속성에 설정한다.
        $(this).attr("src", $(this).data("src")).css("opacity", 0);

        return true;
      }

    }).animate({opacity : '1'}, "slow");
  };

  visible(); // 최초 1회 실행

  return visible;

})($("img")));

 

 

이미 오픈소스로 LazyLoading 관련 js가 많지만 그것들을 쓰기엔 부담스러워 간단하게 기능을 구현해보았습니다. 

 

 

질문이나 오류가 있는 경우엔 댓글 부탁드립니다. ^^