asked on

preload the next image to avoid flicker on my web cam page

Hi

I have a webcam page that is an asp page. the code is :
************************************************************************************************************************
<%@LANGUAGE="VBScript"%>
<HTML>
<HEAD>
<% response.write ("<META HTTP-EQUIV=""REFRESH"" CONTENT=""" & Session("TimeSet") & """>" ) %>
</HEAD>
<BODY>
<div align="center">
<%
            select case session("CameraSet")
            case "Cam 01"
                  response.write ("<img BORDER=""1"" src=""http://111.111.111.111/image.cgi?resoloution=704x480"" width=""704"" height=""480"" alt=""Cam 01"">" )
            case "Cam 02"
                  response.write ("<img BORDER=""1"" src=""http://111.111.111.112/image.cgi?resoloution=704x480"" width=""704"" height=""480"" alt=""02"">" )
            case "Cam 03"
                  response.write ("<img BORDER=""1"" src=""http://111.111.111.113/image.cgi?resoloution=704x480"" width=""704"" height=""480"" alt=""03"">" )
            end select
      %>
</div>
</BODY>
</HTML>
*************************************************************************************************************************
this page is used with <iframe> in a parent page. the parent page sets the session variables, which are which camera to view(CameraSet) and what the refresh time is (TimeSet). Everything is working perfectly except everytime the page refreshes it flickers.

Now to the question:

Is it possible to preload the next image and then switch to that? I presume that if the next image is cached then the refreshing of the page would be instant and therfore no flicking.

Thanks in advance.

Batalf

I'm not VBScript person, so I'll have to give it to you by Javascript. You could refresh the src attribute of your images. Here's a shot

<%@LANGUAGE="VBScript"%>
<HTML>
<HEAD>
<% response.write ("<META HTTP-EQUIV=""REFRESH"" CONTENT=""" & Session("TimeSet") & """>" ) %>
</HEAD>
<BODY>
<div align="center">
<%
select case session("CameraSet")
case "Cam 01"
response.write ("<img name='image1' BORDER=""1"" src=""http://111.111.111.111/image.cgi?resoloution=704x480"" width=""704"" height=""480"" alt=""Cam 01"">" )
case "Cam 02"
response.write ("<img name='image2' BORDER=""1"" src=""http://111.111.111.112/image.cgi?resoloution=704x480"" width=""704"" height=""480"" alt=""02"">" )
case "Cam 03"
response.write ("<img name='image3' BORDER=""1"" src=""http://111.111.111.113/image.cgi?resoloution=704x480"" width=""704"" height=""480"" alt=""03"">" )
end select
%>
</div>
<script type="text/javascript">
var seconds = 30 * 1000; // 30 seconds

function reloadImages(){
self.image1.src = "http://111.111.111.111/image.cgi?resoloution=704x480&random="+Math.random();
self.image2.src = "http://111.111.111.112/image.cgi?resoloution=704x480&random="+Math.random();
self.image3.src = "http://111.111.111.113/image.cgi?resoloution=704x480&random="+Math.random();
setTimeout('reloadImages()',seconds);
}

setTimeout('reloadImages()',seconds);

</script>
</BODY>
</HTML>

Batalf

I forgot to remove

<% response.write ("<META HTTP-EQUIV=""REFRESH"" CONTENT=""" & Session("TimeSet") & """>" ) %>

It should not be a part of my code. You modify the interval between each refresh here

var seconds = 30 * 1000; // 30 seconds

jclothier

ASKER

To Batalf

That works great, one thing though. how do I get my "session(TimeSet)" variable into "var seconds = 30 * 1000; // 30 seconds"

ASKER CERTIFIED SOLUTION

Batalf

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

jclothier

ASKER

Funny I'd tried that and it didn't work, tried it again and it works like a dream. Thanks for your help and a quick response.

Batalf

Glad I could help!

Thanks for the "A"

Batalf