차이
문서의 선택한 두 판 사이의 차이를 보여줍니다.
다음 판 | 이전 판 | ||
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)====== | ||
+ | |||
+ | |||
+ | 접속자가 많은 사이트의 경우 게시물에 그림이 많으면, 서버에 부담이 많이 간다... | ||
+ | 게시물을 불러들일 때 현재 화면에 표시되는 그림만 불러오고, | ||
+ | |||
+ | 대신 img 태그를 수정해야 한다. | ||
+ | |||
+ | <file html> | ||
+ | <img class=" | ||
+ | </ | ||
+ | |||
+ | * [[http:// | ||
+ | * 데모페이지 : http:// | ||
+ | |||
+ | Lazy Load Plugin for jQuery에서 플러그인을 다운받고 사이트에 적용하자. | ||
+ | 해당 플러그인은 제목에서처럼 jQuery 플러그인 위에서 작동하기때문에 | ||
+ | 항상 jQuery를 먼저 로드한 후에 넣도록 하자. | ||
+ | |||
+ | <file javascript> | ||
+ | <script type=" | ||
+ | <script type=" | ||
+ | </ | ||
+ | |||
+ | |||
+ | 플러그인 로딩한 후 사용법은 뭐 여타 플러그인과 다를것 없다. | ||
+ | |||
+ | 해당 객체를 lazyload()하면 끝. | ||
+ | <file javascript> | ||
+ | | ||
+ | </ | ||
+ | |||
+ | |||
+ | |||
+ | lazyload의 옵션들. | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | * threshold : 100 | ||
+ | * placeholder : ' | ||
+ | * event : ' | ||
+ | * effect : ' | ||
+ | |||
+ | |||
+ | |||
+ | ^ 누구나 수정하실 수 있습니다. [[http:// | ||
+ | |||