<< [북기빙 001]. 전략 프로페셔널 무료 제공 | Home | 슬로우 어댑터 >>

Lazy Load Plugin for jQuery

jQuerydimensions, Lazy Load plugin을 가지고 이미지의 Lazy Load가 가능합니다.
이렇게 함으로써 불필요한 서버의 로드를 줄일 수 있게 되어 서버의 성능에 좋은 영향을 미치게 됩니다. 더군다나 Ajax기능을 많이 하게되면 서버의 부하를 기존의 동기 방식보다는 많이 주게 되는 경우가 많아서 이런 Lazy Load같은 특성을 적용하게 됩니다.

아래는 플러그인을 사용하는 방법을 설명합니다.

기본적인 사용 방법....

1. 헤더부분에 아래코드를 넣음
 <script src="jquery.js" type="text/javascript"></script>
<script src="jquery.dimensions.js" type="text/javascript"></script>
<script src="jquery.lazyload.js" type="text/javascript"></script>
2. 해당 이미지 폴더를 지정함
$("img").lazyload();

그외 다양한 옵션들.....

3. threshold를 지정하여 보기전에 200pixels 정도 로드되게 할수도 있음
$("img").lazyload({ threshold : 200 });
4. Placeholder 이미지 지정
$("img").lazyload({ placeholder : "img/grey.gif" });
5. 클릭이나 마우스 오버등의 이벤트에 반응할 때 로드 되게 가능(디폴트는 스크롤될때 로드됨)
$("img").lazyload({ 
placeholder : "img/grey.gif",
event : "click"
});
  • 참고 사이트 : http://www.appelsiini.net/projects/lazyload
Tags :



Add a comment Send a TrackBack