[jQuery] 가시영역의 이미지만 로딩 - Lazy Load Plugin for jQuery (특정영역에만 적용가능)

요즘 유명 메이져사이트를 방문해보면 페이지 로딩 속도가 상당히 빨라졌다는 느낌이 들때가 있습니다.

방문자가 늘어난다고 서버시스템의 사양을 계속해서 높이거나 서버를 분산하기보다는
최대한 효율적인 방법으로 서버의 부하를 줄이는 노력을 강구해야 하는데 그중 이미지 파일들을 페이지 호출시 무작정 보여주는 것이 아니라 브라우져의 가시영역을 이동(스크롤)할 경우에만 해당 영역의 이미지를 보여주는 기능이 있어 소개합니다.
이렇게 함으로써 불필요한 서버의 로드를 줄일 수 있게 되어 서버의 성능에 좋은 영향을 미치게 됩니다.

방법론적인 차이는 있겠지만, 옥션이나 이미지를 주로 다루는 사이트들에서 많이 사용하는 방법이지요~!

이미지를 보시는 바와 같이 스크롤을 내리면 화면이 가시영역으로 들어오게되고,

이때 이미지를 서버에서 호출하게됩니다. 방문자가 많은 사이트나 이미지를 많이 사용하는 사이트에서

유용하게 사용할 수 있는 기능이 되겠네요.

사용법을 간단하게 안내해 드립니다.

1. 헤더부분에 아래코드를 넣음 
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.lazyload.js" type="text/javascript"></script>

2. 이미지 태그를 지정함 (기본코드)
$("img").lazyload();

3. 실제 적용예제(img/grey.gif 파일을 이미지 로드전에 보여줌)
<script type="text/javascript" charset="utf-8">
    $(function() {
        $("img").lazyload({placeholder : "img/grey.gif"});
    });
</script>

4. 특정영역에만 코드적용
게시판이나 본문내용외에 다른 이미지의 로드가 오작동하는 경우가 종종 발생합니다.
이를테면 전체 페이지 레이아웃을 DIV(CSS)로 구성하고 본문내용외의 오른쪽메뉴영역에 썸네일과 같은 이미지들이 있을 경우 페이지를 가장하단으로 가시영역을 스크롤하지 않으면 오른쪽이미지가 가시영역에 들어와있음에도 불구하고 로드되지 않는 경우가 발생합니다. (본문내용 영역이 하단으로 많이 내려올 경우에 종종 발생)

이때는 전체 페이지를 LazyLoad 효과를 적용하지 말고 특정 div 영역에만 국한되게 적용할 수 있습니다.
jQuery 문법인 $() 사용법과 마찬가지로 아래와 같이 적용합니다. 적용법은 아래와 같습니다.

<script type="text/javascript" charset="utf-8">
      $(function() {
          $("#lazyload img").lazyload({placeholder : "img/grey.gif"});
      });
</script>

<div id="lazyload">
.....<img src="....">
</div>

해당 "lazyload"라는 id값을 가진 div영역 내에서만 작동하게됩니다.

jquery.lazyload.js

재밋게 활용해보세요.~! 특정영역 지정이나, 기타 옵션은 참고사이트 데모페이지를 참조하시기 바랍니다.
참고사이트: http://www.appelsiini.net/projects/lazyload/