View Full Version : Refreshing image only

02-07-2007, 08:04 PM
I would like to use a banner from http://www.wunderground.com (http://www.wunderground.com/geo/GizmoBannerPromo/global/stations/07690.html)
this banner display the time end the T from any location you want.
The problem is that we have to refresh the page every time to display correct time.
Is the a way with javascript to just refresh the image and not the entire page ?
Any advice would be helpfull

02-08-2007, 01:10 AM
This is an interesting question.

I'm not sure of the exact answer.

I believe it should be possible... use:
document.Images['name'].src = 'new.src';
(I think).

However, refreshing to the same src wouldn't reload it, if that image is changing (in the case of a dynamic image), unless you did somehting like added a random number to the end of it-- 'new.src?rand=324399' so the browser would think it's new. (That syntax gives php and other server side languages a value for the variable 'rand', and can actually be used for things in images.... but at the moment, it's just a little workaround). Actual properties of caching/reloading are up to the browser.
As for using a list and different images changing from time to time, that should be just fine.

02-08-2007, 02:32 AM
Well, ddjr33 is right.However, I would recommend Flash or similar for this purpose. Or maybe even a javascript clock to keep the count going in plain text over the image. I think both of those are better options that constantly reloading an image.

02-08-2007, 02:40 AM
Especially for people with dial-up internet. I had a program which would reload the page for a dynamic textarea... as you can tell, that didn't go so well :) My browser completely froze up after 10 seconds. Flash I think would be your best bet.

02-08-2007, 07:42 AM
Certainly include some kind of delay. Since the question wasn't specific and this isn't my area, really, I just gave the basic code needed to change it, not keep track of how often.

I don't see why flash would be needed in this case.

02-08-2007, 10:32 PM
Thank you for all yours answers

I'm looking for script used to refresh webcam to try to adapt it to my situation.
Still searching....

02-08-2007, 10:45 PM
What? A webcam script would almost certainly be a plug in with streaming media, generated in a complex way as it must be live from the camera.... this isn't just a simple javascript method.
I'm confused.

02-09-2007, 06:41 AM
And what about this code

the code (part 1)

<script language="JavaScript" type="text/javascript">

// original code by jovino
// � 2001 jovino
// all rights reserved

// the following variables are used to customize the web cam
// the camImage variable can be an absolute or local path to the file
// make sure the camImage variable is quoted
// and the refreshIntervalSeconds variable is not

var camImage = 'webcam.jpg';
var refreshIntervalSeconds = 60;

// that�s all the javascript you need to customize!!
// please do not modify any of the script below this line
// there are no user serviceable parts inside

var secondsLeft = refreshIntervalSeconds;

function startClock() {
if (secondsLeft > 0) {
if (secondsLeft < 10) {
document.webCam.timer.value = '0' + secondsLeft;
} else {
document.webCam.timer.value = secondsLeft;
secondsLeft = secondsLeft - 1
timerID = setTimeout('startClock()', 1000);
} else {
date = new Date();
imageNumber = date.getTime();
document.webCamImage.src = camImage + '?' + imageNumber;
secondsLeft = refreshIntervalSeconds;
// -->

the code (part 2)

Place this image tag somewhere on your HTML page. Leave the question mark at the end of the image source because it is for non-caching trickery. If you have a different sized image, make sure you change the width and height attributes. Also make sure that your image src is correct for your webcam image.

<img src="webcam.gif?" name="webCamImage" alt="web cam" title="web cam" width="320" height="240" border="0">

the code (part 3)

This mini-form is for the countdown timer. Omitting this code, you will give you JavaScript errors unless you either make the timer element type="hidden" or you further modify the portion of the javaScript that displays the timer. See the instructions below for information on modifying this script.

<form name="webCam" action="#">
Refresh in: <input type="text" name="timer" size="2"> seconds.

the code (part 4)

To make the whole thing go, you need to add an onLoad atribute to the <body> tag. Your code should look something like this:

<body onLoad="startClock()">

02-09-2007, 03:22 PM
Did you try it? If it works, there is your answer. For simply refreshing an image, this works:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<img name="updater" src="some.jpg?var1=0">
<script type="text/javascript">
function update_it(){
var count=document.images.updater.src.toString(16).split('=')[1]*1;

Notes: Image name in green must appear both places in the code. The red 5000 is for every five seconds, adjust as needed/desired. If the image is large, be kind to dial-up users and have a long interval. The time between refreshes should be at least enough time for the image to load, preferably twice the load time for the image.

02-09-2007, 03:39 PM
Thank you very much John your code work fine i've adjusted the interval update to 60 seconds. :)

For your question i've tried the code but on first refresh http://www.wunderground.com returns an invalid link :confused:

02-09-2007, 05:58 PM
I just realized that if the page were to be refreshed or navigated away from and then returned to, many of the images would be cached. To avoid this, I've added a random component:

var count=parseInt(document.images.updater.src.toString(16).split('=')[1]*1)+Math.random();

And, to be sure that an updated image is displayed at first (upon refresh or return to the page), add this below the interval call: