Javascript
[jQuery] Lazy 로 이미지 리소스 트래픽 절약하기
- 2023.10.18 10:58:57
 이미지가 리소스가 많은 웹페이지 로드시 과도한 트래픽이 발생하게 되는데, 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')); } }); }); |
|
| 첨부파일1 | jquery.lazy.min.js.zip (3.0K) 93 회 다운로드 |
|---|---|