lazy load라는 스크립트는 효율적인 이미지 로딩을 위한 자바스크립트 라이브러리 입니다.
lazy load는 가시영역(보이는 곳)의 이미지만 로딩할때 사용됩니다.
그러므로 브라우저상 에서 스크롤링을 할때 이미지 객체가 가시영역일 경우 로딩이 진행됩니다.
그러므로 서버의 과부하는 줄여주고 효율적인 로딩시스템을 제공합니다.
사용법은 아래와 같습니다.
<body>
<div id="lazyload"><img src="images/grey.gif" data-original="images/poster_01.jpg"></div>
...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" charset="utf-8"></script>
<script src="js/jquery.lazyload.js" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
$(function() {
$("#lazyload img").lazyload({
effect : "fadeIn",
});
});
</script>
</body>
#lazyload 라는 아이디를 가진 곳의 img 객체만 lazy load로 처리하게 됩니다.
물론 클래스도 가능합니다.
.lazyload img 로 명명하게 되면 클래스 중 lazyload라는 이름을 가진 곳의 img 객체만 lazy load로 처리 합니다.
그리고 현재의 스크립트는 fadein 효과 입니다.
그러므로 이미지 객체가 가시영역에 들어오게 되면 로딩 되기 전, 잠시 회색의 이미지를 보여주기 위해
<img src="images/grey.jpg" data-original="images/poster_01.jpg">라고 명명 해줬습니다.
src="images/grey.gif" 는 회색의 이미지 입니다.
data-original="images/poster_01.jpg" 는 실제로 보일 이미지의 경로 입니다.
자세한 사항은 아래의 주소를 참고하세요.
http://www.appelsiini.net/projects/lazyload
jQuery와 dimensions, Lazy Load plugin을 가지고 이미지의 Lazy Load가 가능합니다.
이렇게 함으로써 불필요한 서버의 로드를 줄일 수 있게 되어 서버의 성능에 좋은 영향을 미치게 됩니다. 더군다나 Ajax기능을 많이 하게되면 서버의 부하를 기존의 동기 방식보다는 많이 주게 되는 경우가 많아서 이런 Lazy Load같은 특성을 적용하게 됩니다.
아래는 플러그인을 사용하는 방법을 설명합니다.
기본적인 사용 방법....
1. 헤더부분에 아래코드를 넣음<script src="jquery.js" type="text/javascript"></script>2. 해당 이미지 폴더를 지정함
<script src="jquery.dimensions.js" type="text/javascript"></script>
<script src="jquery.lazyload.js" type="text/javascript"></script>
$("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
I see
no changes, wake up in the
morning and I ask myself Things would never be the same.
