웹마스터 팁
스크롤 맨아래로 내리면 자동으로 글 목록 더보이기 구현(게시판어어느 스킨이든 사용가능)
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
-
溺內
2013.08.10 07:50
오오 좋은 팁 감사합니다
-
괜찮군요~ 다만... 님 테스트페이지... 절차 너무 까다로운.. ㅋㅋㅋㅋㅋ 익플에서는 님 사이트 지대루 안나오는 증상..ㄷㄷ
그래도 팁으로는 상당히 좋습니다~굿~!
-
익플 갖다버릴려구요ㅋㅋㅋㅋㅋㅋㅋㅋㅋ 모든 보더를 css3로 처리해버려서... csspie도 복복으로 먹히니... 어차피 앱제작도 들어가고... 암튼 도움되었다니 다행입니다 ㅎㅎ
-
즐보드
2013.08.12 12:02
스크랩 해놓아야 겠네요... 좋은 팁입니다. 예전에 핀터레스트 벽돌게시판에다가 위와 같은 기능을 넣을려 고생했던적이 있었는데.. 금방 하셨네요 ㅡ,.ㅡa ㅋㅋㅋ 좋은정보 감사합니다.
-
펑쿤
2014.02.12 10:45
-
모얼더
2014.02.12 16:58
스크립트 영역에 #list_load_deobogi 를 #list_deobogi 로 수정하시고
리플에 있는것처럼
var idx = 2; // 생성될 객체 idx
이것도 추가해보세요.
-
펑쿤
2014.02.13 09:41
http://street-ark.com/board_taax13
오오 감사합니다 ㅜㅜ 드디어 작동은합니다! 근데 스크롤내려서 새로뜨는 페이지는
섬네일이안뜹니다...흑흑왜그럴까요 ㅜㅜ?!
=================================================================
<div id="list">
{@
if(!$mi->zine_thumb_width) $mi->zine_thumb_width = 90;
if(!$mi->zine_thumb_height) $mi->zine_thumb_height = 90;
if(!$mi->zine_margin) $mi->zine_margin = 10;
}
<script cond="$mi->zine_style=='3' || $mi->zine_style=='4'" type="text/javascript">
<load target="js/jquery.masonry.min.js" type="body" />
jQuery(function($){
$('#bd_zine').imagesLoaded(function(){
$('#bd_zine').masonry({
itemSelector:'li',
isFitWidth:true,
<!--@if($mi->card_effect!='N')-->
isAnimated:true,
animationOptions:{duration:500,easing:'easeInOutExpo',queue:false}
<!--@end-->
})
})
});</script>
<style type="text/css">
<block cond="!$mi->zine_hover && !Mobile::isMobileCheckByAgent()">
#bd_zine.zine li:hover .tmb_wrp{ -ms-transform:rotate(5deg);-moz-transform:rotate(5deg);-webkit-transform:rotate(5deg);transform:rotate(5deg)}
#bd_zine.card li:hover{z-index:10;-ms-transform:scale(1.05);-moz-transform:scale(1.05);-webkit-transform:scale(1.05);transform:scale(1.05)}
</block>
#bd_zine .tmb_wrp .no_img{width:{$mi->zine_thumb_width}px;height:{$mi->zine_thumb_height}px;line-height:{$mi->zine_thumb_height}px}
#bd_zine a:hover,#bd_zine a:focus,#bd_zine .select a{z-index:20;border-color:#{$mi->color};}
#bd_zine.zine .tmb_wrp img,#bd_zine.card li{ {$mi->zine_css} }
<block cond="!$mi->zine_tx_color">
#bd_zine .info b,#bd_zine .info a{color:{$mi->shadow};}
#bd_zine.card h3{color:#{$mi->color};}
</block>
<block cond="$list_config['thumbnail']">
#bd_zine.zine .rt_area{margin-left:{$mi->zine_thumb_width+20}px}
#bd_zine.zine .tmb_wrp{margin-left:-{$mi->zine_thumb_width+20}px}
</block>
<block cond="$mi->zine_style=='3' || $mi->zine_style=='4'">
#bd_zine{margin:0 auto;padding:{$mi->zine_margin}px 0}
#bd_zine li{width:{$mi->zine_thumb_width}px;margin:{$mi->zine_margin}px}
#bd_zine .tmb_wrp .no_img{width:{$mi->zine_thumb_width-2}px;height:{$mi->zine_thumb_width-2}px;line-height:{$mi->zine_thumb_width-2}px;border:1px solid #DDD}
<!--@if($mi->zine_thumb_width > 399)-->
#bd_zine.card h3{font-size:15px}
#bd_zine.card .cnt{margin-top:1.5em}
#bd_zine.card .info{font-size:12px}
<!--@elseif($mi->zine_thumb_width > 299)-->
#bd_zine.card h3{font-size:14px}
<!--@elseif($mi->zine_thumb_width > 199)-->
#bd_zine.card h3{font-size:13px;letter-spacing:-1px}
#bd_zine.card .info{font-size:11px}
<!--@elseif($mi->zine_thumb_width < 139)-->
@media screen and (max-width:320px){
#bd_zine.card li{width:124px}
}
<!--@end-->
</block>
</style>
<include cond="$notice_list && $mi->notice_style=='2'" target="_notice.html" />
<ol id="bd_zine" class="bd_lst<!--@if(!$mi->zine_style)--> zine zine1<!--@elseif($mi->zine_style=='2')--> zine zine2<!--@elseif($mi->zine_style=='3')--> card card1<!--@elseif($mi->zine_style=='4')--> card card2<!--@end--><!--@if(!$mi->tmb_effect)--> img_load<!--@elseif($mi->tmb_effect=='2')--> img_load2<!--@end-->">
<li cond="!$document_list && !$notice_list" class="no_doc">{$lang->no_documents}</li>
<!--// 공지 시작 -->
<li cond="$notice_list && !$mi->notice_style" loop="$notice_list=>$no,$document" class="notice">
<!--// 날짜 -->
<div cond="$mi->zine_style=='2'" class="big_date">
<div class="dd bolder">{$document->getRegdate('d')}</div>
<div class="mmyy">
<span class="mm">{$document->getRegdate('M')}</span>
<span class="yy"> {$document->getRegdate('Y')}</span>
</div>
<div class="hh ng">{getTimeGap($document->get('regdate'), "H:i")}</div>
</div>
<!--// 썸네일 영역 -->
<div class="rt_area">
<div cond="$list_config['thumbnail']" class="tmb_wrp ribbon_v{$mi->ribbon_style}">
<!--// 썸네일 -->
<span cond="!$document->thumbnailExists()" class="no_img tmb">No Image</span>
<block cond="$document->thumbnailExists()"><span cond="$mi->tmb_effect=='2'" class="no_img loading"></span><img class="tmb" src="{$document->getThumbnail($mi->zine_thumb_width,$mi->zine_thumb_height,$mi->zine_thumb_type)}" alt="" /></block>
<!--// 좌측 상단 리본 -->
<span class="ribbon nnu notice"><i>notice</i></span>
</div>
<!--// 제목 -->
<h3 class="ngeb">{$document->getTitle($mi->subject_cut_size)}</h3>
<!--// 본문 요약 -->
<div class="cnt" cond="$list_config['summary']">{$document->getSummary($mi->content_cut_size)}</div>
<!--// 글 정보 -->
<div class="info">
<span cond="$list_config['regdate'] && $mi->zine_style!='2'" class="itm">Date<b>{$document->getRegdate("Y.m.d")}</b></span>
<span cond="$mi->use_category=='Y' && $document->get('category_srl')" class="itm">Category<b>{$category_list[$document->get('category_srl')]->title}</b></span>
<span cond="$list_config['nick_name']" class="itm">By<b>{$document->getNickName()}</b></span>
<span cond="@in_array(zine,$mi->cmt_count)" class="itm">Reply<b>{$document->getCommentCount()}</b></span>
<span cond="$list_config['readed_count']" class="itm">Views<b>{$document->get('readed_count')}</b></span>
<span cond="$list_config['voted_count']" class="itm">Votes<b>{$document->get('voted_count')}</b></span>
<!--// 확장변수 -->
<block loop="$list_config=>$key,$val" cond="$mi->zine_extra=='Y' && $val->idx!=-1">
<span cond="$val->eid!='rating' && $val->eid!='link_url'" class="itm">{$val->name}<b>{$document->getExtraValueHTML($val->idx)}</b></span>
</block>
<span cond="@in_array(zine,$mi->ext_img)">{$document->printExtraImages(60*60*$mi->duration_new)}</span>
<input cond="$grant->manager" type="checkbox" name="cart" value="{$document->document_srl}" title="Check" onclick="doAddDocumentCart(this)" checked="checked"|cond="$document->isCarted()" />
</div>
</div>
<a href="{getUrl('document_srl',$document->document_srl,'listStyle',$listStyle, 'cpage','')}"><span class="blind">read more</span></a>
</li>
<!--// 일반 목록 시작 -->
<li loop="$document_list=>$no,$document" class="select"|cond="$document_srl==$document->document_srl">
<!--// 날짜 -->
<div cond="$mi->zine_style=='2'" class="big_date">
<div class="dd bolder">{$document->getRegdate('d')}</div>
<div class="mmyy">
<span class="mm">{$document->getRegdate('M')}</span>
<span class="yy"> {$document->getRegdate('Y')}</span>
</div>
<div class="hh ng">{getTimeGap($document->get('regdate'), "H:i")}</div>
</div>
<!--// 썸네일 영역 -->
<div class="rt_area">
<div cond="$list_config['thumbnail']" class="tmb_wrp ribbon_v{$mi->ribbon_style}">
<!--// 썸네일 -->
<span cond="!$document->thumbnailExists()" class="no_img tmb">No Image</span>
<block cond="$document->thumbnailExists()"><span cond="$mi->tmb_effect=='2'" class="no_img loading"></span><img class="tmb" src="{$document->getThumbnail($mi->zine_thumb_width,$mi->zine_thumb_height,$mi->zine_thumb_type)}" alt="" /></block>
<!--// 리본 -->
<block cond="$mi->zine_ribbon!='N'">
<block cond="!$mi->zine_ribbon || $mi->zine_ribbon=='new_date'">
<!--@if((int)($document->getRegdate('YmdHis')>date("YmdHis", time()-$mi->duration_new*60*60)))-->
<span class="ribbon nnu new"><i>new</i></span>
<!--@elseif((int)(zdate($document->get('last_update'),'YmdHis')>date("YmdHis", time()-$mi->duration_new*60*60)))-->
<span class="ribbon nnu update"><i>update</i></span>
<!--@else-->
<span cond="$mi->zine_ribbon=='new_date'" class="ribbon"><i class="date"><b>{$document->getRegdate("d")}</b><small>{$document->getRegdate("M")}</small></i></span>
<!--@end-->
</block>
<span cond="$mi->zine_ribbon && $mi->zine_ribbon!='new_date'" class="ribbon">
<i cond="$mi->zine_ribbon=='cate' && $document->get('category_srl')" class="cate">{$category_list[$document->get('category_srl')]->title}</i>
<i cond="$mi->zine_ribbon=='date'" class="date"><b>{$document->getRegdate("d")}</b><small>{$document->getRegdate("M")}</small></i>
<i cond="$mi->zine_ribbon=='read'"><b>{$document->get('readed_count')}</b><small>Views</small></i>
<i cond="$mi->zine_ribbon=='vote'"><b>{$document->get('voted_count')}</b><small>Likes</small></i>
<i cond="$mi->zine_ribbon=='cmt'"><b>{$document->getCommentCount()}</b><small>Replies</small></i>
<i cond="$mi->zine_ribbon=='extra'">{$document->getExtraValueHTML($mi->extra_num)}<!--<small>{@$extravar_list = $document->getExtraVars()}{$extravar_list[$mi->extra_num]->name}</small>--></i>
</span>
</block>
</div>
<!--// 제목 -->
<h3 class="ngeb">{$document->getTitle($mi->subject_cut_size)}</h3>
<!--// 본문 요약 -->
<div class="cnt" cond="$list_config['summary']">{$document->getSummary($mi->content_cut_size)}</div>
<!--// 글 정보 -->
<div class="info">
<span cond="$list_config['regdate'] && $mi->zine_style!='2'" class="itm">Date<b>{$document->getRegdate("Y.m.d")}</b></span>
<span cond="$mi->use_category=='Y' && $document->get('category_srl')" class="itm">Category<b>{$category_list[$document->get('category_srl')]->title}</b></span>
<span cond="$list_config['nick_name']" class="itm">By<b>{$document->getNickName()}</b></span>
<span cond="@in_array(zine,$mi->cmt_count)" class="itm">Reply<b>{$document->getCommentCount()}</b></span>
<span cond="$list_config['readed_count']" class="itm">Views<b>{$document->get('readed_count')}</b></span>
<span cond="$list_config['voted_count']" class="itm">Votes<b>{$document->get('voted_count')}</b></span>
<!--// 확장변수 -->
<block loop="$list_config=>$key,$val" cond="($mi->zine_extra=='Y' || $mi->link_board) && $val->idx!=-1">
<span cond="$val->eid!='rating'" class="itm<!--@if($val->eid=='link_url')--> link_url< </block>
<span cond="@in_array(zine,$mi->ext_img)">{$document->printExtraImages(60*60*$mi->duration_new)}</span>
<input cond="$grant->manager" type="checkbox" name="cart" value="{$document->document_srl}" title="Check" onclick="doAddDocumentCart(this)" checked="checked"|cond="$document->isCarted()" />
<a cond="$mi->link_board && $document->isEditable()" class="link_modify" href="{getUrl('act','dispBoardWrite','document_srl',$document->document_srl,'comment_srl','')}">{$lang->cmd_modify}</a>
</div>
</div>
<a class="hx" <!--@if(!$mi->link_board)-->href="{getUrl('document_srl',$document->document_srl,'listStyle',$listStyle,'cpage','')}"<!--@else-->href="{$document->getExtraEidValue('link_url')}" target="_blank"<!--@end--> data-viewer="{getUrl('document_srl',$document->document_srl,'listStyle','viewer','page','')}">
<span class="blind">Read More</span>
</a>
</li>
</ol><div id="list_deobogi"></div>
</div>
<script>
var idx = 1;var idx_p = 1;
var page = 2;
var idx = 2; // 생성될 객체 idx
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://street-ark.com/index.php?mid={$mid}&page='+page+' #list';
jQuery(newDiv).insertBefore('#list_deobogi' );
jQuery(morediv).load(reload_href_full).fadeIn(1000).delay(5000);
page++;
idx++;
idx_p++;
}, 1000);
}
});
});
</script>
-
모얼더
2014.02.13 20:49
아는건 없지만 소스 봐서는
<div cond="$list_config['thumbnail']" class="tmb_wrp ribbon_v{$mi->ribbon_style}">
이부분이 제대로 작동 안하니깐
<div class="tmb_wrp ribbon_v fin_load" style="display: block;">
이렇게 수정해주면 작동은 하겠네요.
-
모바일 스크롤 테러하지 맙시다.
소스는 html 파일 등으로 첨부하세요.
-
Crom
2014.02.12 12:28
정말 좋은 팁 감사합니다. 그런데 혹시 글을 자동으로 불러오는 것이 아니라 '더보기' 같은 버튼으로 구현하려면 어떻게 해야 하는 지 조언주실 분 있으실지요?
-
더보기는 저걸 function으로 감싸시면됩니다...
function more() {
~~~~~위의 코드 집어넣으시공
}
<a onclick="more()"> 더보기 </a>
-
영흥도우럭
2014.02.13 22:13
사이트 잘 구경했습니다. 좋네요. 이렇게 좌우 대칭으로 글을 쌓는것은 방명록형태를 수정한건가요?
-
네ㅎㅎ
카테고리(분류)를 변수로 사용합니다.
-
으잌ㅋㅋㅋ 제가 구현중인 기능인데 팁으로 올리셨다니 ㅋㅋㅋㅋ
굽신굽신..
-
전설의 글을 읽으셨군요 ㅎㅎ
이건 쉽게 접근하기위한 팁이예요 ㅠ
$ajax로도 꼭 성공하시길!!
-
롤롤롤롤
2014.02.26 06:24
잘되니 좋네요..근데..중간중간에 "2로딩중입니다" 이런식으로 남아있을때가 있습니다. 그리고 글이 더이상 없을때...
계속 "8로딩중입니다. 2로딩중입니다. 2로딩중입니다." 이런식으로 계속 나오는데..이건 어떻게 해결안될까요?ㅠ
그리고 궁금한게있는데..최근게시물 위젯에서도 이와같은 기능을 사용하고싶은데..
가능할까요?ㅠ
-
좀 오래된 답변이지만..
음. 중간에 나오던건... 예전에 그랬었었는데 이래저래 수정하다보니 고쳐서 딱히 기억은 안나는데...
마지막은..
뭐 if 요런걸로 잡아주시면...
음.. flag를 사용하시죠 (flag는개념상으로만 슬꼐요.)
var flag = 0;
if((글이없을때)){
flag = 1;
}
그리고 돌아가는데는
위에다가
if(!flag == 1) {
로딩로딩 소스~~
}
요래 해주시면 없을떄 더는 로딩안하겠죠?
근데 뭐 여기서 변화가 있을때는 또 바꿔줘야하니 요런부분은 짜보시면될듯합니다.
중간에 안나오는건 load 가 callback을 지원하진 않으니
그냥 삭제 정도로..
중가에 삐져나오는건 로딩이 안됫을때 그럴겁니다..
제가 만들때는 계속 테스트해서 결국 동기화를 이루었는데
아마 요글을 쓸당시에 그랬던거 같습니다.
화이팅.. 저도 기억이안나서.... ㅠㅠ
-
하마의땀은빨강
2016.12.01 09:33
좋은 글 잘보고 갔니다~~
밑도 끝도 없이 퍼가기만하는 분들을 위해 숨겨놓은 함정
<script></scipt>안에
var idx = 2; // 생성될 객체 idx
이거 추가해주세요 ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ