통합검색

Javascript

[jQuery] Lazy 로 이미지 리소스 트래픽 절약하기



이미지가 리소스가 많은 웹페이지 로드시 과도한 트래픽이 발생하게 되는데,
lazy 는 화면에 노출된 이미지 리소스를 그때그때 로드하여 출력해 주는 플러그인이다.



[!]Plugin include[/!] 
cdn 서비스나 본 글 하단에 첨부된 js파일을 다운로드 하여 lazy 적용을 원하는 웹페이지 상단에 인클루드 한다.
 
<script type="text/javascript" src="jquery.lazy.min.js"></script>



[!]img 태그 수정[/!] 
lazy가 적용될 <img> 요소를 아래와 같이 수정한 다음, plugin 을 적용한다.
 
<HTML>
1. src 어트리뷰트를 data-src 로 변경
2. class="lazy" 추가
 
<img data-src="path/to/image.jpg" class="lazy" />

 
<jQuery>
.lazy 가 부여된 이미지 리소스에 대해 lazy 적용
 
$(function() {
    $('.lazy').Lazy();
});



[!]상세 옵션 설정[/!] 
lazy는 커스터마이징이나 디버깅 할 수 있는 몇가지의 옵션을 제공한다.
( 전체 옵션 확인 : http://jquery.eisbehr.de/lazy/#configuration )
  
$(function() {
    $('.lazy').Lazy({
        'thresold' : 100, // 이미지가 화면에 100px 만큼 보인 시점에 등장하도록 설정
        'effect' : 'fadeIn', // fade 등장효과 적용 (기본값: show)
        'effectTime' : 500, // fade 적용시 duration 시간
        'onError' : function(element) { // img 로드 실패시 callback 함수
            console.log('error loading ' + element.data('src'));
        }
    });
});

 
첨부파일 jquery.lazy.min.js.zip (3K) 26 회 다운로드
리스트