웹마스터 팁
스크롤 맨아래로 내리면 자동으로 글 목록 더보이기 구현(게시판어어느 스킨이든 사용가능)
2013.08.10 03:41
방금 글올리고 그새 완성했네요.
데모페이지
http://internetbat.com/manvswoman
코드공개에 앞서
본 글이 참조되어야합니다.
http://www.xpressengine.com/index.php?mid=freeboard&page=3&document_srl=22239472
jquery load 에 대한 약간의 설명과
id가 list 라는 div가 필요합니다.
(실제 붙히실때는 절대! list라고 사용하지마세요. 그냥 아무거나 붙히셔도되는데 id가 list는 보드스킨만다 어디서 겹칠지모릅니다.)
우선 글목록을 list라는 div로 감싸줍니다.
그리고 div끝에 list_deobogi라는 div를 만들어줍니다.
<div id="list">
글목록
<div id="list_deobogi"></div>
</div>
그리고 아래를 추가합니다.
<script>
var idx = 1;
var idx_p = 1;
var page = 2;
jQuery(document).ready(function () {
jQuery(window).scroll(function() {
if (jQuery(window).scrollTop() == jQuery(document).height() - jQuery(window).height()) {
var newDiv=document.createElement('div');
newDiv.innerHTML= idx+'로딩중입니다';
newDiv.setAttribute('id','more'+idx);
setTimeout(function(){
morediv = '#more'+idx;
morediv_p = '#more'+idx_p;
var reload_href_full ='http://internetbat.com/index.php?mid={$mid}&page='+page+' #list';
jQuery(newDiv).insertBefore('#list_load_deobogi' );
jQuery(morediv).load(reload_href_full).fadeIn(1000).delay(5000);
page++;
idx++;
idx_p++;
}, 1000);
}
});
});
</script>
추가로
newDiv.innerHTML= '로딩중입니다';
이 부분을 newDiv.innerHTML= '<img src="loading_img.gif">';
로 해주시고 loading 이미지를 loading_img.gif로 저장하시면 로딩이미지가 뜨게되어
더깔끔해집니다.
이번건 저번꺼 보다 참 쉽죠?
이 글은 팁게시판에도 올라갑니다만
조금 더 접근성을 높히기 위해 자유게시판에도 올립니다.
이번건 테스트를 위해 궂이 가입안하셔도 됩니다만 ㅠ
회원 가입한번씩해주시면 감사하겠습니다 ㅠ
------------------------------------------------------------------------------------------------------------------
야매코딩입니다...
setTimeout을 준 이유는 안그랬더니 한번에 주르르르륵 로딩이 되어버려서
뭔가 로딩느낌이 안나서입니다...
으으..
그냥 쓰셔도 무방해요....
댓글 19
제목 | 글쓴이 | 날짜 |
---|---|---|
xe 폴더를 어딘가로 이전했을 때 로그인이 안되는 경우... [2] | preware | 2007.10.05 |
경험에 의지한 로그인 풀림현상 처리 | 남국 | 2007.10.06 |
(회원 정보) 작성 글 수, 댓글 수를 보여주기 (#4, 2007-10-13) [7] | Simulz | 2007.10.06 |
댓글 등록시 하드에 있는 이미지를 쉽게 웹에 링크시키는 프로그램 [6] | 팔공산 | 2007.10.07 |
(게시물, 서명) 원하는 곳에 서명 출력하기 [10] | Simulz | 2007.10.08 |
(글) 알림 옵션 기본 체크 [27] | Simulz | 2007.10.10 |
주메뉴와 하위메뉴 구분이 잘 안되시는 분들께... [2] | 다케루 | 2007.10.12 |
"회원 추가" 를 "회원 가입" 으로 .. [9] | 디키스 | 2007.10.12 |
홈페이지 주소 깔끔하게 사용하기 [초보용] [14] | 똑디 | 2007.10.13 |
optimizer 체크 후 저장해도 체크 해제 되시는 분들 [2] | 다케루 | 2007.10.15 |
상단에 로그인 회원가입 등 메뉴 넣기 (id/pw찾기 추가) [7] | mireu | 2007.10.16 |
최근 이미지 출력 위젯에서 글 제목 출력을 선택항목으로 바꾸기 [6] | 必得力 | 2007.10.17 |
제로보드 소스 서버에 올릴때.. [3] | 남국 | 2007.10.17 |
ZBXE용 모니위키 연동 플러그인 소스 [4] | 베니 | 2007.10.17 |
최근 댓글 리스트에 & " < > 안 나오게 하기 [3] | 必得力 | 2007.10.18 |
관리자 페이지 모듈->댓글 내용에 & " < > 안 나오게 하기 [1] | 必得力 | 2007.10.18 |
답글 영역 안보이게 블로그에서 토글 방식 적용 [9] | 지허 | 2007.10.18 |
타이틀을 플래시로 보이기.... [5] | 맞장 | 2007.10.18 |
메뉴에 플래시 적용하기 [7] | 지허 | 2007.10.23 |
게시물 작성시 날짜 지정하기 [14] | JAMSUN2 | 2007.10.24 |