그러냐

[jQuery] Lazy Load Plugin - 이미지 동적호출 본문

jquery

[jQuery] Lazy Load Plugin - 이미지 동적호출

관절분리 2018. 5. 31. 15:37
반응형

출처  http://www.dontorz.com/bbs/?mode=view&bbsid=study&bltn_seq=208


1. jQuery - Lazy Load 플러그인 이란?

제이쿼리의 lazyload 플러그인의 역할은 단순히 이미지를 페이지의 load시 호출이 아닌

동적인 호출로 바꿔준다는 점 하나뿐이다.

(이미지가 현재 보고있는 스크롤에 도달하면 호출 시작)

 

단순히 생각하면 이미지를 늦게 호출해 주는것뿐인 플러그인이지만

이미지를 동적으로 호출해 주는것 하나만으로

페이지 최초 로딩 속도 향상, 필요없는 이미지에 대한 트래픽 절감 효과등을 기대할수있어

스크롤이 긴 갤러리형 페이지에 적용할 경우 페이지 속도 향상에 큰 기대를 할수있다.

 

 

2. 배포 사이트

lazyload 플러그인은 직접 다운받아 소스를 웹서버에 업로드 후 사용 하거나

제공되는 cnd 서버를 링크하여 사용할 수 있다.

 

배포- http://www.appelsiini.net/projects/lazyload

CDN- https://cdnjs.com/libraries/jquery.lazyload

 

 

3. 적용/사용 방법

ㄱ. 문서에 jquery.js 와 jquery.lazyload.js 를 순서대로 호출

ㄴ. lazyload를 적용할 이미지 태그의 src값을 비워두거나 기본 이미지값으로 변경

ㄷ. lazyload를 적용할 이미지 태그의 원래 src값을 data-original="" 속성값에 입력

ㄹ. $(이미지태그 셀렉터).lazyload(); 이벤트 실행

 

undefined
  1. <html>
  2. <head>
  3. 	<script type="text/javascript" src="jquery.js"></script>
  4. 	<script type="text/javascript" src="jquery.lazyload.js"></script>
  5. 	<script type="text/javascript">
  6. 		$(function(){
  7. 			$('img.lazy').lazyload();
  8. 		});
  9. 	</script>
  10. </head>
  11. <body>
  12. 	<img src="loding.gif" data-original="sample.jpg" class="lazy">
  13. </body>
  14. </html>

 

 

4. Options

ㄱ. placeholder
용도 :실제 이미지가 표시되기전에 대체 이미지를 지정.
placeholder를 지정하지 않고 이미지 src값에 바로 대체 이미지 src값을 지정해도 된다.
사용법 :$('img.lazy').lazyload({placeholder : '/img/loding.gif'});

 

ㄴ. effect
용도 :이미지가 등장시의 효과를 변경.
기본적으로 show()의 형태로 나타나나 'fadeIn' 값을 지정하여 fadeIn() 형태로 출력 가능.
사용법 :$('img.lazy').lazyload({effect : 'fadeIn'});

 

ㄷ. effectTime
용도 :이미지가 등장시 효과지속시간을 변경. (1초 = 1000)
사용법 :$('img.lazy').lazyload({effect : 'fadeIn', effectTime : 1000});

 

ㄹ. threshold
용도 :이미지가 뷰포트에 출력되기 이전부터 호출 하도록 설정.
가령 200값을 지정할 경우 뷰포트에 등장하기 200px전부터 이미지를 호출한다.
사용법 :$('img.lazy').lazyload({threshold : 200});

 

ㅁ. event
용도 :이미지 호출이벤트를 변경.
기본적으로 스크롤을 변경하여 이미지가 뷰포트에 출력되면 호출을 시작하지만
'click'이나 'mouseover'값을 지정하여 클릭시 또는 마우스 오버시 호출하도록 이벤트를 변경가능하며
'sporty'나 'foobar'를 사용하여 커스텀 이벤트로 호출가능.
($('img.lazy').trigger('sporty') 형태로 이벤트 호출)
사용법 :$('img.lazy').lazyload({event : 'click'});

 

ㅂ. load
용도 :이미지 호출이 완료되면 실행될 콜백함수 지정.
사용법 :$('img.lazy').lazyload({load : function(){ alert('이미지 호출이 완료되었습니다.'); }});


반응형
저작자표시

'jquery' 카테고리의 다른 글

chart.js - Y 축의 최대 값과 최소값 설정 포함 예제  (0) 2019.01.24
jquery multi file upload 모음  (0) 2018.06.28
jquery 멀티 파일 업로드 [종합]  (0) 2018.05.28
jSignature 예제  (0) 2018.01.03
IE 8 에서 Label 태그 정상작동 안하는 경우 해결방법  (0) 2017.12.07
'jquery' Related Articles more