[게시판] 갤러리 게시판에 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%
댓글목록
shadow님의 댓글
와우~~ 외국 자료에서 관련 내용을 읽어본 바가 있습니다.
소중한 자료 감사드립니다.
축하합니다. 첫댓글 포인트 5포인트를 획득하였습니다.
칠천피트님의 댓글
정보 감사합니다.
lycoshaw님의 댓글
자료 감사합니다.~
아트리어님의 댓글
정말 감사합니다.
고현규님의 댓글
자료 감사합니다~
신비님의 댓글
멋진 팁 감사합니다. ^^