Jump to content

Image Refresh


DanH42
 Share

Recommended Posts

I have a webcam hooked up to the internet, with a page I haven't updated in years (at the time, I just copied the code from somewhere else). At the moment, the camera takes a new picture every 5 seconds, and saves it as 'webcam.jpg'. The page reloads every 9 seconds, giving you the new picture. However, this makes the entire page reload, and also erases the picture for a few seconds. Is there a way to use JavaScript (or anything else) to have just the image reload, but have the new image load over the old one, so there's never just a blank page?Here's the current code if it would help:

<html><head><title>webcam</title><meta HTTP-EQUIV="Expires" CONTENT="Tue, 1 Jan 2008 01:00:00 GMT"><meta HTTP-EQUIV="Cache-Control" CONTENT="no-store, no-cache, must-revalidate, post-check=0, pre-check=0"><meta HTTP-EQUIV="Pragma" CONTENT="no-cache"><meta HTTP-EQUIV="REFRESH" CONTENT="9"></head><p align="center"><img src="webcam.jpg" CACHE="FALSE" width="640" height="480"></body></html>

Edited by DanH42
Link to comment
Share on other sites

Give your image an ID first:<img id="webcam" src="webcam.jpg" ...then you can use this Javascript to refresh. This adds a parameter to the end to make sure it doesn't use a cached image. The setInterval function makes the code run every X milliseconds.

function refresh_image(){  document.getElementById('webcam').src = 'webcam.jpg?_dc=' + (new Date).valueOf();}setInterval(refresh_image, 9000);

Link to comment
Share on other sites

Thanks! That worked perfectly!

Give your image an ID first:<img id="webcam" src="webcam.jpg" ...then you can use this Javascript to refresh. This adds a parameter to the end to make sure it doesn't use a cached image. The setInterval function makes the code run every X milliseconds.
function refresh_image(){  document.getElementById('webcam').src = 'webcam.jpg?_dc=' + (new Date).valueOf();}setInterval(refresh_image, 9000);

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...