'HTML'에 해당되는 글 1건

  1. 2009.01.29 [html] 이미지 자동 reload 시키는 javascript


내가 운영하는 http://sshan.net 에는 실시간환율 페이지가 있다.


이것은 환율에 관련된 이미지들이다. 각각의 주소는 
http://218.38.18.162/gif/all/2b97001.gif  
http://218.38.18.162/gif/all/2b97031.gif 
http://218.38.18.162/gif/all/2b97003.gif 
http://218.38.18.162/gif/all/2b97023.gif 
이다.

환율은 시시각각으로 변하기 때문에 자동으로 reload 시켜주면 좋을 것 같다. meta refresh tag 을 이용해서 같은 것을 구현할 수도 있지만 이 경우에는 홈페이지를 전체를 다시 reload 하기 때문에 부하가 더 걸린다. javascript 를 이용해서 이미지만 reload 시키자. 아래는 소스이다.

아래 붉은 부위 중에 i<5 는 img 가 4개 파일이기 때문에 5 이고 60000 은 60 초 즉 1 분마다 업데이트 해주라는 이야기이다.


<HTML>

<HEAD>

<script LANGUAGE="JavaScript">

<!--

function reloadImg(){

uniq = new Date();

uniq = "?"+uniq.getTime();
var i;

for (i=1;i<5;i++)
{
 var target='imgToLoad'+i;
 newImage1 = document.images[target].src;

 index1 = newImage1.indexOf("?", 0);

 if(index1 > 0){

 newImage1 = newImage1.substr(0, index1);

 }

 document.images[target].src = newImage1+uniq;

}
setTimeout('reloadImg()', 60000);

}

// -->

</script>

</HEAD>

<br>

<body onload="reloadImg()">
<table width=100% align=center cellspacing=0 cellpadding=0 border=0>
<tr><td align=center>

<table width=700 align=center cellspacing="0" cellpadding="0" border="1">

<tr><td align=center width=175>

<img src = http://218.38.18.162/gif/all/2b97001.gif  border=0 width=175 height=153 name="imgToLoad1">

</td><td align=center width=175>

<img src = http://218.38.18.162/gif/all/2b97031.gif  border=0 width=175 height=153 name="imgToLoad2">

</td><td align=center width=175>

<img src = http://218.38.18.162/gif/all/2b97003.gif  border=0 width=175 height=153 name="imgToLoad3">

</td><td align=center width=175>

<img src = http://218.38.18.162/gif/all/2b97023.gif  border=0 width=175 height=153 name="imgToLoad4">

</td></tr>

</table>

</body></html>


,