접속자가 많은 사이트의 경우 게시물에 그림이 많으면, 서버에 부담이 많이 간다… 게시물을 불러들일 때 현재 화면에 표시되는 그림만 불러오고, 나머지 화면밖의 것들은 스크롤을 해서 화면의 보이는 위치로 옮겨질 때에 읽어들이도록하는 플러긴이다.

대신 img 태그를 수정해야 한다.

<img class="lazy" data-original="img/example.jpg" width="765" height="574">

• Lazy Load Plugin for jQuery 이거다..
• 데모페이지 : http://www.appelsiini.net/projects/lazyload/enabled.html

Lazy Load Plugin for jQuery에서 플러그인을 다운받고 사이트에 적용하자. 해당 플러그인은 제목에서처럼 jQuery 플러그인 위에서 작동하기때문에 항상 jQuery를 먼저 로드한 후에 넣도록 하자.

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.lazyload.js"></script>

플러그인 로딩한 후 사용법은 뭐 여타 플러그인과 다를것 없다.

해당 객체를 lazyload()하면 끝.

   jQuery('img').lazyload();

lazyload의 옵션들.

• threshold : 100 이미지가 표시되기 100픽셀 이전부터 이미지를 로딩하기.
• placeholder : 'img/loading_spinner.gif' 지연로딩(Lazy Loading)전에 이미지를 loading_spinner.gif로 표시해둔다.
• event : 'click' 해당 이미지는 'click'을 해야만 이미지가 로딩된다.
• effect : 'fadeIn' 이미지가 로딩완료 된 후 fadeIn효과를 통하여 이미지가 표시된다.