웹마스터 팁

꽤 오래 고민한건대.......

해답은 역시 내려 놓았을때 나온다고 하였나요?


http://internetbat.com/nexonvsnc


데모페이지구요

데모페이지 이용방법은 죄송스럽게도 로그인은 꼭 하셔야 하는 ㅠ

그래야 새로고침 UI랑 추천 등이 가능해서 입니다.


우선 jquery의 load함수를 이용하는건대요


이제까지 저의 생각도 class단에서 해결봐야한다는 압박에 시달렸습니다.

jQuery('????').load('xxx.php');

식의 load함수 구현 뿐이 안되었기 떄문이죠.


이게 문제가 무엇이냐면

XE는 각개 페이지가 움직이는게 아니고

프론트 html만 존재하고 실상은 class.php다 컨트롤 하고 있으니

저런 파일자체를 딸수가 없는 상황인거죠


그렇다면 class단에서 ajax를 넣어 주어야 한다는 압박감에

귀차니즘으로 미루다가


생각해보니깐 어차피 UI인데 눈에만 보이면 되지 않냐?

는 생각이 급 들었습니다.


그래서 생각해낸게


글목록을 <div id="list"> 글목록내용 </div>

로 감싸고


js에는

function refresh(href) {

jQuery('#list').load(href);

}


리프레쉬 할 링크 (클릭시 새로고침, 추천버튼 등)에

<a onclick="refesh(http://internetbat.com/{$mid} #list)">클릭시 새로고침</a>


인겁니다.


즉, jQuery가 자바스크립트처럼 getelementID 따위가 아니고  jQuery('#xxx #xxx img') 등 마치 css 잡아주는 느낌의 것들도 다 컨트롤 할수 있다는 점에 착안한 점입니다.


물론 stack overflow를 참조하기도 하였습니다만

위에 올렸던 데모페이지에서 보시면 아무 이동없이 깔끔히 새로고침 및 추천이 되는것을 확인할 수 있습니다.

이것은 모바일에서도 동일 작동하고있습니다.


혹시 저와같은 고민이 있으셨던 많은 분들을 위해 작은 코멘트 올려봅니다.


--------------------------------------------------------------------------------------------------------

대충 소스를 날려썼더니

제가봐도 뭐어쩌라는건지 잘모르겠네요..


조금 쉽게 예시를 들어드리겠습니다.


- 페이지이동없이 글목록 불러오기. (댓글, 추천 어디든 상관없습니다.)


<!--새로고침 유도 div-->

<div id="refresh_layer"><a onclick="refesh(http://internetbat.com/{$mid} #list)">클릭시 새로고침합니다.</a></div>


<!--글목록-->

<div id="list">

글목록, 추천, 댓글 등을 감싸세요.

</div>


<!--스크립트 (위치는 무상관. 추천 위치 : head안, 문서의 맨아래. 대세는 맨아래. 저는 아무대나)-->

<s-ript>

function refresh(href) {

jQuery('#list').load(href);

}

</s-ript>


이게 끝입니다.



- 자동새로고침


<s-ript>
var ref_t = setInterval(function (){
jQuery('#list').load('http://internetbat.com/{$mid} #list_load').fadeIn('slow');, 6000);
</s-ript>

6초당 한번씩 새로고침합니다.

서버에 부하가 걸립니다.


ajax가 아니라 눈으로는 그렇지만 실제로는 페이지 전체 (물론 이미지등은 이미 로드되어있으니 html,php코드만)를 로딩해서 byte수준이 아닌 kb수준으로 리로딩됩니다.

저의 경우는 13~4kb정도 로딩됩니다.

XE를 쓰시는 분이라면 거의 동일할것으로 생각됩니다.


그래서 한시간동안 아무짓도 안하면 중지 시켜버려야겠습니다.


<s-ript>
var ref_t = setInterval(function (){
jQuery('#list').load('http://internetbat.com/{$mid} #list_load').fadeIn('slow');, 6000);


setTimeout(function() {

clearIntervar(ref_t)}, 3600000);
</s-ript>


본 소스는 실제 돌아가는 소스를 넣은게 아니라

임의로 작성한 소스이므로 오타등이 있을 수 있습니다.


실제로 작동 시킬때는 여러변수를 잘 생각하셔야 합니다.

예를 들면 댓글에다가 붙혔을때는 대댓글을 쓰다가 리로드되어 대댓글 창이 사라져서

저의 경우는 대댓글클릭시 clearInterval로 중지시켜버립니다.

댓글 안쓰면 어쩔 수 없는 거지만 UX상 대댓글쓸려다말면 어차피 딴거 클릭할꺼같아서 이정도로만 뒀습니다.


자동으로 돌아가는

일반게시판 예시 : http://internetbat.com/jjal


클릭시 새로고침이 있지만 setinterval로 10분돌리다가 별 움직임이 없으면 clear시키고 클릭시 새로고침을 주는 방식으로 해서 보시려면 10분 기다리셔야되는 예시 : http://internetbat.com/index.php?mid=jinbovsbosu

제목 글쓴이 날짜
익명게시판에서 회원 구분 가능하게 + 각 게시물에서 다른 아이디가 나타나게 하는 방법 [3] jn4kim 2013.08.06
1.7.3.4 + sketchbook5 에서 대댓글 에디터 사용불가문제 [4] 뒤뒤 2013.08.07
textarea 테그 제임스라 2013.08.07
새로고침없이 페이지 리로딩 간단하고 쉽게 서버한테는 미안하게 하는법 (서버단이 아니고 스킨에 ㅠ jquery load씀) 게시글,댓글,추천등 모든 부분다가능합니다. [2] 장포크 2013.08.08
최신 제로보드 XE 동영상 강의 [25] 하얀마법 2013.08.09
지식인 모바일에서 답변이 보이지 않는 현상. 씨즈부스 2013.08.10
스크롤 맨아래로 내리면 자동으로 글 목록 더보이기 구현(게시판어어느 스킨이든 사용가능) [19] 장포크 2013.08.10
[주옥시리즈]닉네임/이메일 변경 금지 팁 [10] socialskyo 2013.08.10
여러장의 이미지 동시 삽입시 이미지 간격조정 팁 [3] 꿈섬 2013.08.10
게시판 댓글 스킨에서 추가적인 변수 전달 안 되는 현상 보완 위해서. [1] sejin7940 2013.08.11
[1.7.4] 로그인창 옆에 신규 쪽지 수 보여주기 socialskyo 2013.08.13
벼랑끝 font awesome 45도를 아시나요 ? [2] file 지그재거 2013.08.13
탈퇴회원 레벨 아이콘 출력 안하기 [7] Gunmania 2013.08.17
리퍼러 수집기 애드온 실행후 사이트 먹통되었을때 대처법 [2] serendip 2013.08.19
jQuery fadeIn 홈페이지 부드럽게 이동 [4] file 지그재거 2013.08.20
간단하게 사용자가 에디터 바꿔쓸 수 있도록 하기 ^^ [6] file Xiso 2013.08.20
XE 알림센터 스킨을 iOS 알림창 비슷하게 만들기 [2] file novelic 2013.08.21
1전 짜리 팁 - 최근수정일 표시 [2] 지그재거 2013.08.22
모바일에서 레벨 아이콘, 이미지 아이콘 표시하기 [4] Gunmania 2013.08.23
나름 강력할 것 같은 스팸방지 팁 [16] 꿈섬 2013.08.23