묻고답하기
page_full_width" class="col-xs-12" |cond="$__Context->page_full_width">
스크롤되는 이미지.. 서버에 무리 없을까요?
2003.04.11 15:29
개인서버이며,
아래처럼 파일을 만들어 iframe으로 넣었습니다.
http://jikili.com/love/right.php
위의 주소가 바로 그곳 입니다.
맨아래 하나씩 스크롤 되는 그림이 보이시죠?? 아래의 소스가 바로 그것 입니다.
그런데 이렇게 하고 나니 그림이 하나씩 올라갈때마다 커서 옆에 모래시계가 생기더군요...
서버엔 무리가 되지 않을까요?? <== 제 질문은 이것입니다.
아래 소스 분석을 부탁드립니다.
1. 아래의 소스를 <HEAD>와 </head> 사이에 넣습니다.
<script language="JavaScript1.2">
<!--
//스크롤 박스의 넓이
var scrollerwidth=150
//스크롤 박스의 높이
var scrollerheight=107
//다음 이미지로 전환될 때의 걸리는 시간 간격
var pausebetweenimages=3000
var VSlideImages=new Array()
//이미지 명과 경로를 적어 주세요.
VSlideImages[0]='<img src="http://jikili.com/myphoto/ever(tulip)/1.jpg" border=0" width="150" height="107">'
VSlideImages[1]='<img src="http://jikili.com/myphoto/ever(tulip)/4.jpg" width="150" height="107">'
VSlideImages[2]='<img src="http://jikili.com/myphoto/ever(tulip)/5.jpg" width="150" height="107">'
VSlideImages[3]='<img src="http://jikili.com/myphoto/ever(tulip)/6.jpg" width="150" height="107">'
if (VSlideImages.length>1)
i=2
else
i=0
function locateObject(n, d) { //v3.0
var p,i,x;
if(!d) d=document;
if((p=n.indexOf("?"))>0&&parent.frames.length)
{
d=parent.frames[n.substring(p+1)].document;
n=n.substring(0,p);
}
if(!(x=d[n])&&d.all) x=d.all[n];
for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=locateObject(n,d.layers[i].document);
return x;
}
function moveVFirstImage(whichdiv)
{
if (document.all)
{
tdiv=eval(whichdiv)
if (tdiv.style.pixelTop>0&&tdiv.style.pixelTop<=5)
{
tdiv.style.pixelTop=0
setTimeout("moveVFirstImage(tdiv)",pausebetweenimages)
setTimeout("moveVSecondImage('vSecond')",pausebetweenimages)
return
}
if (tdiv.style.pixelTop>=tdiv.offsetHeight*-1)
{
tdiv.style.pixelTop-=5
setTimeout("moveVFirstImage(tdiv)",10)
}
else
{
tdiv.style.pixelTop=scrollerheight+5
window.status=tdiv.style.pixelTop;
tdiv.innerHTML=VSlideImages[i]
if (i==VSlideImages.length-1)
i=0
else
i++
}
}
else
{
tlayer=eval(whichdiv)
if (tlayer.top>0&&tlayer.top<=5)
{
tlayer.top=0
setTimeout("moveVFirstImage(tlayer)",pausebetweenimages)
setTimeout("moveVSecondImage(locateObject('vSecond'))",pausebetweenimages)
return
}
if (tlayer.top>=tlayer.document.height*-1)
{
tlayer.top-=5
setTimeout("moveVFirstImage(tlayer)",10)
}
else
{
tlayer.top=scrollerheight+5
tlayer.document.write(VSlideImages[i])
tlayer.document.close()
if (i==VSlideImages.length-1)
i=0
else
i++
}
}
}
function moveVSecondImage(whichdiv)
{
if (document.all)
{
tdiv2=eval(whichdiv)
if (tdiv2.style.pixelTop>0&&tdiv2.style.pixelTop<=5)
{
tdiv2.style.pixelTop=0
setTimeout("moveVSecondImage(tdiv2)",pausebetweenimages)
setTimeout("moveVFirstImage('vFirst')",pausebetweenimages)
return
}
window.status=tdiv2.offsetHeight;
if (tdiv2.style.pixelTop>=tdiv2.offsetHeight*-1){
tdiv2.style.pixelTop-=5
setTimeout("moveVSecondImage('vSecond')",10)
}
else
{
tdiv2.style.pixelTop=scrollerheight+5
window.status=tdiv2.style.pixelTop
tdiv2.innerHTML=VSlideImages[i]
if (i==VSlideImages.length-1)
i=0
else
i++
}
}
else if (document.layers)
{
tlayer2=eval(whichdiv)
if (tlayer2.top>0&&tlayer2.top<=5)
{
tlayer2.top=0
setTimeout("moveVSecondImage(tlayer2)",pausebetweenimages)
setTimeout("moveVFirstImage(locateObject('vMain').document.layers['vFirst'])",pausebetweenimages)
return
}
if (tlayer2.top>=tlayer2.document.height*-1)
{
tlayer2.top-=5
setTimeout("moveVSecondImage(tlayer2)",10)
}
else
{
tlayer2.top=scrollerheight+5
tlayer2.document.write(VSlideImages[i])
tlayer2.document.close()
if (i==VSlideImages.length-1)
i=0
else
i++
}
}
}
function startVScroll(){
if (document.all)
{
locateObject('vSecond').style.top=scrollerheight+5
locateObject('vFirst').visibility='visible';
locateObject('vSecond').visibility='visible';
moveVFirstImage(locateObject("vFirst"))
}
else if (document.layers)
{
locateObject('vMain').visibility='show'
locateObject('vFirst').visibility='show'
locateObject('vSecond').top=scrollerheight+5
locateObject('+ '+ 'vSecond').visibility='show'
moveVFirstImage(locateObject('vMain').document.layers['vFirst'])
}
}
//-->
</script>
2. 아래처럼 <body>태그 안에 [bgcolor="#FFFFFF" onLoad="startVScroll()" onBlur="self.close()"]를 넣습니다.
<body bgcolor="#FFFFFF" onLoad="startVScroll()" onBlur="self.close()">
3. 아래의 소스를 <body>와 </body> 사이에 넣습니다.
<div id="vMain" style="width:150; height:107; position:absolute; top: 0px; left: 0px; visibility: visible; clip: rect(0 150 107 0); overflow: hidden; z-index: 2">
<div id="vFirst" style="top:1; width:150;position:absolute; z-index: 1; background: #000000; padding: 0px 0px; visibility: visible">
<img src="http://jikili.com/myphoto/ever(tulip)/2.jpg" width="150" height="107"></div>
<p>
</p>
<p>
</p>
<div id="vSecond" style="top:1; width:150;position:absolute; z-index: 1; background: #000000; padding: 0px 0px; visibility: visible">
<img src="http://jikili.com/myphoto/ever(tulip)/3.jpg" width="150" height="107"></a></div>
</div>
아래처럼 파일을 만들어 iframe으로 넣었습니다.
http://jikili.com/love/right.php
위의 주소가 바로 그곳 입니다.
맨아래 하나씩 스크롤 되는 그림이 보이시죠?? 아래의 소스가 바로 그것 입니다.
그런데 이렇게 하고 나니 그림이 하나씩 올라갈때마다 커서 옆에 모래시계가 생기더군요...
서버엔 무리가 되지 않을까요?? <== 제 질문은 이것입니다.
아래 소스 분석을 부탁드립니다.
1. 아래의 소스를 <HEAD>와 </head> 사이에 넣습니다.
<script language="JavaScript1.2">
<!--
//스크롤 박스의 넓이
var scrollerwidth=150
//스크롤 박스의 높이
var scrollerheight=107
//다음 이미지로 전환될 때의 걸리는 시간 간격
var pausebetweenimages=3000
var VSlideImages=new Array()
//이미지 명과 경로를 적어 주세요.
VSlideImages[0]='<img src="http://jikili.com/myphoto/ever(tulip)/1.jpg" border=0" width="150" height="107">'
VSlideImages[1]='<img src="http://jikili.com/myphoto/ever(tulip)/4.jpg" width="150" height="107">'
VSlideImages[2]='<img src="http://jikili.com/myphoto/ever(tulip)/5.jpg" width="150" height="107">'
VSlideImages[3]='<img src="http://jikili.com/myphoto/ever(tulip)/6.jpg" width="150" height="107">'
if (VSlideImages.length>1)
i=2
else
i=0
function locateObject(n, d) { //v3.0
var p,i,x;
if(!d) d=document;
if((p=n.indexOf("?"))>0&&parent.frames.length)
{
d=parent.frames[n.substring(p+1)].document;
n=n.substring(0,p);
}
if(!(x=d[n])&&d.all) x=d.all[n];
for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=locateObject(n,d.layers[i].document);
return x;
}
function moveVFirstImage(whichdiv)
{
if (document.all)
{
tdiv=eval(whichdiv)
if (tdiv.style.pixelTop>0&&tdiv.style.pixelTop<=5)
{
tdiv.style.pixelTop=0
setTimeout("moveVFirstImage(tdiv)",pausebetweenimages)
setTimeout("moveVSecondImage('vSecond')",pausebetweenimages)
return
}
if (tdiv.style.pixelTop>=tdiv.offsetHeight*-1)
{
tdiv.style.pixelTop-=5
setTimeout("moveVFirstImage(tdiv)",10)
}
else
{
tdiv.style.pixelTop=scrollerheight+5
window.status=tdiv.style.pixelTop;
tdiv.innerHTML=VSlideImages[i]
if (i==VSlideImages.length-1)
i=0
else
i++
}
}
else
{
tlayer=eval(whichdiv)
if (tlayer.top>0&&tlayer.top<=5)
{
tlayer.top=0
setTimeout("moveVFirstImage(tlayer)",pausebetweenimages)
setTimeout("moveVSecondImage(locateObject('vSecond'))",pausebetweenimages)
return
}
if (tlayer.top>=tlayer.document.height*-1)
{
tlayer.top-=5
setTimeout("moveVFirstImage(tlayer)",10)
}
else
{
tlayer.top=scrollerheight+5
tlayer.document.write(VSlideImages[i])
tlayer.document.close()
if (i==VSlideImages.length-1)
i=0
else
i++
}
}
}
function moveVSecondImage(whichdiv)
{
if (document.all)
{
tdiv2=eval(whichdiv)
if (tdiv2.style.pixelTop>0&&tdiv2.style.pixelTop<=5)
{
tdiv2.style.pixelTop=0
setTimeout("moveVSecondImage(tdiv2)",pausebetweenimages)
setTimeout("moveVFirstImage('vFirst')",pausebetweenimages)
return
}
window.status=tdiv2.offsetHeight;
if (tdiv2.style.pixelTop>=tdiv2.offsetHeight*-1){
tdiv2.style.pixelTop-=5
setTimeout("moveVSecondImage('vSecond')",10)
}
else
{
tdiv2.style.pixelTop=scrollerheight+5
window.status=tdiv2.style.pixelTop
tdiv2.innerHTML=VSlideImages[i]
if (i==VSlideImages.length-1)
i=0
else
i++
}
}
else if (document.layers)
{
tlayer2=eval(whichdiv)
if (tlayer2.top>0&&tlayer2.top<=5)
{
tlayer2.top=0
setTimeout("moveVSecondImage(tlayer2)",pausebetweenimages)
setTimeout("moveVFirstImage(locateObject('vMain').document.layers['vFirst'])",pausebetweenimages)
return
}
if (tlayer2.top>=tlayer2.document.height*-1)
{
tlayer2.top-=5
setTimeout("moveVSecondImage(tlayer2)",10)
}
else
{
tlayer2.top=scrollerheight+5
tlayer2.document.write(VSlideImages[i])
tlayer2.document.close()
if (i==VSlideImages.length-1)
i=0
else
i++
}
}
}
function startVScroll(){
if (document.all)
{
locateObject('vSecond').style.top=scrollerheight+5
locateObject('vFirst').visibility='visible';
locateObject('vSecond').visibility='visible';
moveVFirstImage(locateObject("vFirst"))
}
else if (document.layers)
{
locateObject('vMain').visibility='show'
locateObject('vFirst').visibility='show'
locateObject('vSecond').top=scrollerheight+5
locateObject('+ '+ 'vSecond').visibility='show'
moveVFirstImage(locateObject('vMain').document.layers['vFirst'])
}
}
//-->
</script>
2. 아래처럼 <body>태그 안에 [bgcolor="#FFFFFF" onLoad="startVScroll()" onBlur="self.close()"]를 넣습니다.
<body bgcolor="#FFFFFF" onLoad="startVScroll()" onBlur="self.close()">
3. 아래의 소스를 <body>와 </body> 사이에 넣습니다.
<div id="vMain" style="width:150; height:107; position:absolute; top: 0px; left: 0px; visibility: visible; clip: rect(0 150 107 0); overflow: hidden; z-index: 2">
<div id="vFirst" style="top:1; width:150;position:absolute; z-index: 1; background: #000000; padding: 0px 0px; visibility: visible">
<img src="http://jikili.com/myphoto/ever(tulip)/2.jpg" width="150" height="107"></div>
<p>
</p>
<p>
</p>
<div id="vSecond" style="top:1; width:150;position:absolute; z-index: 1; background: #000000; padding: 0px 0px; visibility: visible">
<img src="http://jikili.com/myphoto/ever(tulip)/3.jpg" width="150" height="107"></a></div>
</div>
댓글 4
-
지은사랑
2003.04.11 15:38
-
지은사랑
2003.04.11 16:03
4/10일 오후4시 현재 접속상태 양호 -
구름
2003.04.11 18:44
이미지가 루핑이라 페이지에 4개를 그대로 찍은것과 동일한 부하가 걸립니다.
쉽게 말해 큰 부하가 아니라는 거죠.
처음 불러낼때만 이미지 로드를 하고 그다음 찍을때 부턴 로컬에서 가져오기 때문에 괜찮습니다. -
지은사랑
2003.04.12 09:26
*^^*
감사합니다.
개인서버를 돌리는데, 집의 컴터가 다운된듯.... 아니, 컴터가 아니구 인터넷 모뎀이 다운된듯..
요즘 자주 그러는데, 모뎀 바꿔달라면 잘 바꿔주나요?? *^^*
"한통"인데....