Reloading an image

1

Does anybody know how to refresh an image every 15 seeconds using javascript? It’s the same pic… but the pic changes cuz its from a webcam. Tell me if thats not specific enough

2 

<script language="JavaScript">
<!--
var sURL = unescape(window.location.pathname);
function doLoad() {
    setTimeout( "refresh()", 15000);
}

function refresh() {
    window.location.href = sURL;
}
-->
</script>

Then stick this in your pages BODY tag:

onLoad="doLoad();"

Try that.

3

holy crap, my last post messed this thread up!

4

looks like my last post skrewed this topic up.

5

whoa, that code messed up the forum lay out.

josh, try this

http://javascript.internet.com/miscellaneous/refresh.html

6

Not to worry solid; you forgot to close the script tag =)

Cheers!
Kirupa :thumb:

7

or you can just use a simple html meta tag:

<**HEAD>
<**meta http-equiv="Refresh" content="3; URL=index.html">
<**/HEAD>

[edit]

3 is the number of seconds (i guess)

8

hey guys… thanks a lot, but i dont want to refresh the whole page… i just want to refresh a picture
is there a way to do that?
if not i could just keep loading it up through flash or something i guess

9

beeeee------ump

10

The only way I know to do it is to use a frameset, where the frame for the cam image is almost the same size as the image. Use the meta refresh code that Ahmed posted on the page with the cam image.

That’s how we did it for webcam sites back in the days before streaming video.

11

lol sounds good… so I’ll slap up the ol’ iFrame and be stylin

12

Let me know how it works with the iframe. We didn’t have that option back then since iframes didn’t work with Netscape, and at the time Netscape had about 70% of the market.

13

I’m probably gonna try tomorrow or wednesday since my freakin camera decided to just out of nowhere break and i have no idea whats wrong with it… lol

14

Hrmmm, what about just refreshing the image source? I don’t know if this will work if the image is cached, but it’s worth a shot right?

<SCRIPT LANGUAGE="JavaScript">
<!--
function refreshIMG() {
	document.images["myImage"].src = "imageName.jpg";
}
refreshInterval = setInterval(refreshIMG, 15000);
-->
</SCRIPT>

Put that between the <HEAD></HEAD> tags of your HTML document. It uses setInterval to call the function every 15000 milliseconds (15 seconds), and the function inside replaces the source of the image with the name “myImage” with the image “imageName.jpg”.

Now you will have to create the image in the document so it knows what image to replace right? Well we will use a standard IMG tag that will load the original “imageName.jpg” and have the name “myImage” so the script knows to update it. Of course this tag goes in between the <BODY></BODY> tags.

<IMG SRC="imageName.jpg" WIDTH="xx" HEIGHT="xx" NAME="myImage">
15

I’ll probably give that a shot too lost
thanks :beam:

16

If it doesn’t work because of cached images you can try using the pragma method to stop caching.

Between the <HEAD></HEAD> tags add this…

<META HTTP-EQUIV="PRAGMA" CONTENT="NO-CACHE">

NOTE: again, not sure how well this would work, but it’s worth a try.

17

lol its cool that you know all this code but dont know if it would work.
I wanna be smart

18

Well I know the code yes, but I have reasons on why I don’t know if will work :wink:

For the image source swap, the code itself is compatible with both NS and IE, so no problem there, but if you cache the image I don’t know if you refresh the source of the image with the same image if the cached image will display instead of the new version. And I don’t have a webcam to test :wink:

For the pragma code, I believe there are difficulties with it in IE5 (not sure about 6) so I wasn’t sure how well that would work.

19

So i went ahead and tried… but the image doesn’t refresh or anything… not really sure what to do… well heres the source anywho…

<html>
<head>
<META HTTP-EQUIV="PRAGMA" CONTENT="NO-CACHE">
<SCRIPT LANGUAGE="JavaScript">
<!--
function refreshIMG() {
    document.images["ccam"].src = "ccam.jpg";
}
refreshInterval = setInterval(refreshIMG, 15000);
-->
</SCRIPT>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<IMG SRC="ccam.jpg" NAME="ccam" WIDTH="320" HEIGHT="240" id="ccam"> 
</body>
</html>

thanks for the help so far

20

Since your scripting is client side, it has nothing new to refresh. There is no mechanism to pull a fresh image from the server.

I know of no way to pull a fresh image from the server without reloading the entire page, which is why we used a frameset.