(jQuery) 이미지 카운터 실시간 갱신하기

준비물: (jQuery) 연결하기



블로그 이미지 그래프 카운터를 자동 새로고침 해보기.

아래 자바스크립트코드를 SCRIPT에 삽입하거나 JS 파일로 저장하여 연결한다.

$(document).ready(function($){ var refresh_StatGraph = function() { var time = new Date().getTime(); var StatGraph = $("img[src*=StatGraph]"); //StatGraph.fadeOut('slow'); StatGraph.attr('src','/plugins/StatGraph/count/count.php?owner=개인번호&time='+time); //StatGraph.fadeIn('slow'); } self.setInterval(refresh_StatGraph, 1000); });

var time = new Date().getTime();
밀리초를 구해 time 변수에 저장한다.^[각주:1]

var StatGraph = $("img[src*=StatGraph]");
img 요소 중 src 속성에 StatGraph가 포함된 요소를 선택해서 재사용을 위해 객체를 StatGraph 변수에 저장한다.

//StatGraph.fadeOut('slow');
페이드 아웃, 페이드 인 효과를 적용하려면 // 주석 처리를 제거한다.

slow, fast, normal 외에 밀리초로 지정할 수 있다.

owner=개인번호
적용할 블로그의 이미지 카운터 속성을 보면 owner= 뒤에 숫자가 보일 것이다.
그 숫자를 설정한다.

매치 함수로 자동 인식해도 되지만 한 번 설정 후에는 변경되지 않으므로 직접 입력한다.

self.setInterval(refresh_StatGraph, 1000);
설정한 밀리초^[각주:2]마다 refresh_StatGraph 함수를 호출한다.

방문자 접속수에 맞춰 적당히 시간을 늘리는 것이 좋다.

1. 새로 적용할 경로에 time 변수를 추가하는 이유: 같은 경로의 이미지는 캐시 파일을 읽어들이기 때문에 새로운 내용이 표시되지 않는다. 그러므로 경로를 다르게 해주기 위해 시간을 붙인 것이다. 난수를 적용해줘도 된다. [본문으로]
2. 1000ms(밀리초) = 1s(초) [본문으로]