갤러리 게시판에 lazyload 적용하기 > 시즌3 공유자료실

간단한 부분이지만, 효과는 기대이상인 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번째줄이 변경되었습니다.