현재 화면에 보이는 그림만 읽어들이기 (Lazy Load) - 기술

문서의 이전 판을 선택했습니다! 저장하면 이 자료로 새 판을 만듭니다.

======현재 화면에 보이는 그림만 읽어들이기 (Lazy Load)======

접속자가 많은 사이트의 경우 게시물에 그림이 많으면, 서버에 부담이 많이 간다...
게시물을 불러들일 때 현재 화면에 표시되는 그림만 불러오고, 나머지 화면밖의 것들은 스크롤을 해서 화면의 보이는 위치로 옮겨질 때에 읽어들이도록하는 플러긴이다.

대신 img 태그를 수정해야 한다.

* [[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를 먼저 로드한 후에 넣도록 하자.

플러그인 로딩한 후 사용법은 뭐 여타 플러그인과 다를것 없다.

해당 객체를 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|위키 사용법]] 참고하세요.  ^

2+1? 이 필드는 비어 있도록 유지하세요:

편집 요약

참고: 이 문서를 편집하면 내용은 다음 라이선스에 따라 배포하는 데 동의하는 것으로 간주합니다: CC Attribution-Noncommercial-Share Alike 4.0 International