이미지 파일들을 페이지 호출시 무작정 보여주는 것이 아니라
브라우져의 가시영역을 이동(스크롤)할 경우에만 해당 영역의 이미지를 보여주는 기능
사용법
1. 헤더부분에 아래코드를 넣음
<script src="jquery.js" type="text/javascript"></script>
< script src="jquery.lazyload.js" type="text/javascript"></script>
2. 이미지 태그를 지정함 (기본코드)
3. 실제 적용예제(img/grey.gif 파일을 이미지 로드전에 보여줌)
$(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://blog.giristory.net/297
참조 - http://www.appelsiini.net/projects/lazyload/
