추적 • randomnumbers • mmpi • ext • torx • osx_ftp_client

차이

문서의 선택한 두 판 사이의 차이를 보여줍니다.

차이 보기로 링크

양쪽 이전 판이전 판
다음 판		이전 판
tech:lazy_load [2014/03/18 17:37] – 바깥 편집 127.0.0.1tech:lazy_load [2016/07/12 00:56] (현재) – 바깥 편집 127.0.0.1
줄 1: 줄 1:
 +{{tag>lazy load image delayed 서버 그림 사진 jquery}}
 ======현재 화면에 보이는 그림만 읽어들이기 (Lazy Load)====== ======현재 화면에 보이는 그림만 읽어들이기 (Lazy Load)======
  
줄 7: 줄 8:
 대신 img 태그를 수정해야 한다.  대신 img 태그를 수정해야 한다. 
  
 +<file html>
 +<img class="lazy" data-original="img/example.jpg" width="765" height="574">
 +</file>
  
-  * [[http://www.appelsiini.net/projects/lazyload|이거다..]]+  * [[http://www.appelsiini.net/projects/lazyload|Lazy Load Plugin for jQuery 이거다..]] 
 +  * 데모페이지 : http://www.appelsiini.net/projects/lazyload/enabled.html
  
 +Lazy Load Plugin for jQuery에서 플러그인을 다운받고 사이트에 적용하자.
 +해당 플러그인은 제목에서처럼 jQuery 플러그인 위에서 작동하기때문에
 +항상 jQuery를 먼저 로드한 후에 넣도록 하자.
  
-^  누구나 수정하실 수 있습니다. [[http://vaslor.net/syntax|위키 사용법]] 참고하세요.  ^+<file javascript> 
 +<script type="text/javascript" src="jquery.js"></script> 
 +<script type="text/javascript" src="jquery.lazyload.js"></script> 
 +</file>
  
-{{tag>lazy load image delayed 서버 그림 사진 jquery}}+ 
 +플러그인 로딩한 후 사용법은 뭐 여타 플러그인과 다를것 없다. 
 + 
 +해당 객체를 lazyload()하면 끝. 
 +<file javascript> 
 +   jQuery('img').lazyload(); 
 +</file> 
 + 
 + 
 + 
 +lazyload의 옵션들. 
 + 
 + 
 + 
 + 
 + 
 +  * threshold : 100   이미지가 표시되기 100픽셀 이전부터 이미지를 로딩하기. 
 +  * placeholder : 'img/loading_spinner.gif'   지연로딩(Lazy Loading)전에 이미지를 loading_spinner.gif로 표시해둔다. 
 +  * event : 'click'   해당 이미지는 'click'을 해야만 이미지가 로딩된다. 
 +  * effect : 'fadeIn'  이미지가 로딩완료 된 후 fadeIn효과를 통하여 이미지가 표시된다. 
 + 
 + 
 + 
 +^  누구나 수정하실 수 있습니다. [[http://vaslor.net/syntax|위키 사용법]] 참고하세요.  ^