추적:

차이

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

차이 보기로 링크

--- tech:lazy_load [2013/12/21 19:20] – anon
+++ tech:lazy_load [2016/07/12 09:26] (현재) – 바깥 편집 127.0.0.1
@@ 줄 1: / 줄 1: @@
+{{tag>lazy load image delayed 서버 그림 사진 jquery}}
+======현재 화면에 보이는 그림만 읽어들이기 (Lazy Load)======
+접속자가 많은 사이트의 경우 게시물에 그림이 많으면, 서버에 부담이 많이 간다...
+게시물을 불러들일 때 현재 화면에 표시되는 그림만 불러오고, 나머지 화면밖의 것들은 스크롤을 해서 화면의 보이는 위치로 옮겨질 때에 읽어들이도록하는 플러긴이다.
+대신 img 태그를 수정해야 한다.
+<file html>
+<img class="lazy" data-original="img/example.jpg" width="765" height="574">
+</file>
+  * [[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를 먼저 로드한 후에 넣도록 하자.
+<file javascript>
+<script type="text/javascript" src="jquery.js"></script>
+<script type="text/javascript" src="jquery.lazyload.js"></script>
+</file>
+플러그인 로딩한 후 사용법은 뭐 여타 플러그인과 다를것 없다.
+해당 객체를 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|위키 사용법]] 참고하세요.  ^