[게시판] 갤러리 게시판에 lazyload 적용하기
첨부파일
-
24 2015-09-17 20:55:53
짧은주소
- - 짧은주소: http://v2.eyoom.net/bbs/?t=1os 주소복사
본문
간단한 부분이지만, 효과는 기대이상인 jquery 입니다.
모바일 페이지에서 로딩 속도는 상당히 중요한 이슈가 되고 있죠.
그에 따라 여러의견이 나오고 있습니다만,HTTP 리퀘스트 수를 줄이것이 무엇보다 중요하다고 부각되고 있습니다.
즉, 파일의 사이즈보다 통신을 줄이는게 속도를 높이는데 좋다라고 말하고들 있더라구요.
(조금된 자료지만- http://www.onlywebpro.com/2010/11/21/improve-loading-speed-of-mobile-web/ )
lazyload는 쉽게 사용자의 가시선상에 들어왔을때 진짜 이미지를 보여주는 역활입니다.
(스크롤바를 통하거나 화면의 세로를 구하거나..)
스킨은 상당히 간단하며, 수정된부분 역시 적습니다.
테스트는 비반응형 테마에서 했습니다.
수정된 파일은 2개 입니다.
eyoom/theme/pc_basic/skin_pc/board/gallery/list.skin.html 와
/eyoom/core/board/list.skin.php 입니다.
파일은 업로드 해두겠습니다.
/eyoom/theme/pc_basic/skin_pc/board/gallery/list.skin.html 에서 변경된 부분은
<script type="text/javascript" src="../../../plugins/jquery_lazyload-master/jquery.lazyload.min.js"></script>
$(function(){ $("img.lazy_blog").lazyload({ effect : "fadeIn", failure_limit : 5, threshold : 1200 }); });
구문이 추가되었습니다. 대략 320 번째줄 입니다.
/eyoom/core/board/list.skin.php 에서 변경된 부분은 62번째줄이 변경되었습니다.
Progress Bar 10%
공유자료실 이용안내
공유자료실 게시판에서 다양한 자료를 공유하실 수 있습니다. 레이아웃, 게시판, 최신글, 플러그인 등 다양한 자료를 공유 해 주세요.
- 포인트 배포가 가능합니다. 포인트를 걸고 자료를 배포하시면 다운로드 발생 시 배포한 회원님께 80%의 포인트가 적립됩니다.
- 적립된 포인트는 이윰몰에서 상품결제 시 사용가능합니다.
- 저작권이 있는 자료는 무단으로 배포를 하실 수 없으니 주의하여 주시길 바랍니다.
- 배포된 해당 자료에 대한 문의는 해당 내용페이지에서만 질문하여 주세요.
배포되는 자료는 이윰넷에서 일일이 필터링 할 수 없으며 문제발생 시 책임을 지지 않습니다. 회원님들간 자발적인 정화와 참여를 부탁드립니다.
댓글목록
shadow님의 댓글
와우~~ 외국 자료에서 관련 내용을 읽어본 바가 있습니다.
소중한 자료 감사드립니다.
축하합니다. 첫댓글 포인트 5포인트를 획득하였습니다.
칠천피트님의 댓글
정보 감사합니다.
lycoshaw님의 댓글
자료 감사합니다.~
아트리어님의 댓글
정말 감사합니다.
고현규님의 댓글
자료 감사합니다~
신비님의 댓글
멋진 팁 감사합니다. ^^